Advanced Redux and the react-redux redux-thunk of application

1. react-redux

• React-Redux Redux is the official React binding library.
• React-Redux React component can make your Redux store read data from, and distributed to store actions to update the data.
• React-Redux Redux is not built, installed separately.
• React-Redux Redux and usually used in conjunction with.

Installation react-redux

$ npm install react-redux

Provider and connect

React-Redux provide <Provider/>components can make your entire app to access data Redux store in:

App.js:

import React, { Component, Fragment } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Todolist from './Todolist';


class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Fragment>
          <Todolist />
        </Fragment>
      </Provider>
    )
  }
}

export default App;

React-Redux provide a connectmethod that allows you to connect components and store.

Two parameters can be defined in the connect process: mapStateToPropsand mapDispatchToProps;

• [MapStateToProps (state, [ownProps]): stateProps] (Function): If this parameter is undefined, the component will monitor the changes Redux store. At any time, as long as the change occurs Redux store, mapStateToProps function is called.

• [MapDispatchToProps (dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function is defined in the object will be treated as Redux action creator, the method as defined object name attribute names; each method returns a new function, the function will dispatch action creator method of performing the return value as a parameter. These properties may be incorporated into the assembly props.

For example: the component in:

import React, { Component } from 'react';
import { connect } from 'react-redux'

class TodoList extends Component {
  render() {
    ... ...
  }
}

// 将store里面的state映射给当前组件，成为组件的props
// 只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该
// 回调函数必须返回一个纯对象，这个对象会与组件的 props 合并
const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

// 将store.dispatch()方法映射到props上
const mapDispatchToProps = (dispatch) => {
  return {
    ChangeInputValue(e) {
      const action = ...
      dispatch(action);
    },
    handleClick() {
      const action = ...
      dispatch(action);
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

redux-react API documentation

2. redux-thunk

After Action issued, Reducer immediately calculate the State, this is called synchronization; after Action issued over a period of time to perform Reducer, which is asynchronous.

• redux-thunk is a commonly used asynchronous action redux middleware. Axios typically used to process the request.
• redux-thunk middleware that allows action to create a function does not return an action object, but returns a function

redux-thunk usage

$ npm install redux-thunk

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const store = createStore(
  reducers,
  applyMiddleware(thunk)
);

export default store;

applyMiddlewares () method is native Redux, middleware function is composed of an array of all, followed by the implementation.

In actionCreator.js in:

// 一般，创建 action 的函数只能返回一个对象
export const initListAction = (list) => {
    return {
        type: constants.INIT_LIST,
        list
    }
}

// ---------------------------

// 使用了 redux-thunk, action函数可以返回一个函数
export const getTodoList = () => {
    return (dispatch) => {
        axios.get('/api/list.json').then(res => {
            const { data } = res;
            const action = initListAction(data);
            dispatch(action);
        })
    }
}

In reducer.js in:

export default (state = defaultState, action) => {

    ··· ···
    if (action.type === constants.INIT_LIST) {
        let newState = JSON.parse(JSON.stringify(state));
        newState.list = action.list;
        return newState;
    }
    return state;
}

In Todolist.js in:

componentDidMount () {
  const action = getTodoList();
  // 这里取到的action是一个函数，当执行dispatch时，会自动执行该函数
  store.dispatch(action);
}

3. react-redux complete binding example redux-thunk (todolist)

https://github.com/caochangkui/todolist-react-redux-thunk