Get Started. It's Free
or sign up with your email address
Rocket clouds
Redux by Mind Map: Redux

1. 2.1/ create reducer

1.1. single reducer as pure JS function(state, action) parameter: action as object has type and payload

1.1.1. change state with payload from action use rest para ...state to change only necesary field

1.2. multiple reducer

1.2.1. import combineReducers

1.2.2. create functions reducers

1.2.2.1. set state with rest para state = {...state, name: action: payload}

1.2.3. create combine Reducer const recuder = combineReducer({    fieldnameReducer: reduderFunctioName,    fieldnameReducer: reduderFunctioName, })

2. 3/ create store

2.1. createStore(reducer, {})

2.2. store.subscribe()

2.3. store.dispatch({type: "", payload: {})

2.3.1. dispatch must have 'type'

3. 1/ import createStore from redux

4. 2.2/ midleWare

4.1. import applyMIddleware from redux

4.2. add const middleware = applyMIddleware(midleware1, middleware2)

4.3. add third para to createStore(, , middleware);

4.4. create middleware function as follow (store)  => (next) => (action) => { }

4.4.1. call next(action), to dispatch to store

5. import logger from 'redux-logger'

6. dispatch Async

6.1. import thunk from redux-thunk

6.2. import axios for RESTFULL request

6.3. store.dispatch((dispatch) => {    dispatch({})    //do something async   } )

6.4. manage action dispatched by switch

7. dispatch Async using promise-redux

7.1. import promise from "redux-promise-middleware"

7.2. pass para promise() to applyMiddleware

7.3. dispatch standard object

7.3.1. dispatch({   type: "",   payload: axios.get('url api') })

7.4. recuder function action will have action as format TYPE_NAME_PENDDING  TYPE_NAME_REJECTED TYPE_NAME_FULFILLED

8. Redux React

8.1. export createStore(reducer, middleware)

8.2. create reducers

8.3. create function action to dispatch()

8.4. install react-redux

8.4.1. wrap react component with prodiver from react-redux. Provide store to provider ReactDOM.render(<provider store="store">      <Layout />  </provider>, app)

8.4.2. add decorator @connect() to Layout Component

8.4.2.1. @connect( (store) => { return {    data1: store.data1  } })