ReactNativeでreduxを利用する

npm install redux react-redux

Action

export const addClip = ({clip}) => {
  return {
    type:　'ADD_CLIP',
    clip
  }
}

export const deleteClip = ({clip}) => {
  return {
    type:　'DELETE_CLIP',
    clip
  }
}

reducer

const initialState = {
  clips: []
}
const reducer = (state = initialState, action) =>{
  switch (action.type) {
    case 'ADD_CLIP':
      return {
        ...state,
        clips: [...state.clips,action.clip]
      }
    case 'DELETE_CLIP':
      return {
        ...state,
        clips: state.clips.filter(clip => clip.url !== action.clip.url)
      }
    default:
      return state
  }
}

export default reducer

store

redux-devtools-extensionはWindows/Linux環境では利用できない

import {createStore, combineReducers} from 'redux'
import userReducer from './reducers/user'
import {composeWithDevTools} from 'redux-devtools-extension'

const rootReducer = combineReducers ({
  user: userReducer
})

const store = createStore(rootReducer, composeWithDevTools)

export default store

ReactNativeデバック環境構築

Windows環境では利用できない(残念)。下記のようなデベロッパーツールがあることを覚えておく。
react-native-debuggerをインストールする https://github.com/jhen0409/react-native-debugger
redux-devtools-extensionインストール

npm install redux-devtools-extension

https://github.com/zalmoxisus/redux-devtools-extension

実装例

import {createStore, combineReducers} from 'redux'
import userReducer from './reducers/user'
import {composeWithDevTools} from 'redux-devtools-extension'

const rootReducer = combineReducers ({
  user: userReducer
})

const store = createStore(rootReducer, composeWithDevTools)

export default store