react-redux在react中的使用

参考阮一峰老师博客：Redux 入门教程

react-redux是redux作者给react提供的一个封装库，可以方便的将redux中的状态和方法注入到react组件中，redux中store相当于数据库，state相当于数据库的数据，dispatch(action)提供了对数据的修改方法，react-redux完成数据订阅，监测store中状态的变化并渲染更新后的react组件。

redux基本API

store：存放状态的容器，通过createStore方法接收一个reducer生成

import { createStore } from 'redux';
const store = createStore(reducer);

state：store中的状态
action：是一个对象，type是必须的，可以带一个参数

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

actionCreator：生成action的函数

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

dispatch：View 发出 Action 的唯一方法。

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

reducer：Store接收一个旧的action生成一个新的state的计算过程

const reducer = function (state, action) {
  return new_state;
};

react-redux基本API

Provider：将redux store中的值传入react组件

  <Provider store={store}>
    <App />
  </Provider>

mapDispatchToProps : redux方法和组件方法的映射

const mapDispatchToProps = dispatch => ({
  switchMenu: menuName => {
    dispatch(switchMenu(menuName));
  }
})

mapStateToProps：redux状态和组件状态的映射

const mapStateToProps = state =>({
  menuName: state.menuName
})

connect：将映射后的状态和方法注入到组件props上，组件中就可以通过this.props.xx拿到想要的状态和方法了

connect(mapStateToProps, mapDispatchToProps)(Header)