【react】redux

Redex是React的数据状态管理器，功能类似Vue的Vuex，都是对数据状态进行保存。

1.安装

通过npm install redux便可安装redux状态管理器。

2.action

action是一个纯函数，redux只能通过dispatch（触发）一个action（动作）来更改状态

// 一个action可以长这样的
export const increase = () => {
  return ({type: 'ZENGJIA'})
}

// 也可以传递一个值，像这样的
export const increase = (number) => {
  return ({type: 'ZENGJIA', payload: number})
}

3.reducer

reducer也是一个纯函数，它接收state和action，并处理相应action的type的事件类型。

const stateInit = {
  number: 0
}

function reducerOne(state = stateInit, action) => {
  switch(action.type){
    case 'INCREASE':
      return {
        ...state,
        number: state.number + 1
      }
    case 'REDUCE':
      return {
        ...state,
        number: state.number - 1
      }  
    default: 
      return state;
  }
}

创建一个初始化的状态stateInit作为reducer的默认值，当触发{type: 'ZENGJIA', payload: number}这个action时，会让状态中的number值加一。

当有多个reducer文件时，redux提供了combineReducersAPI，我们可以将各个reducer整合在一起，这样每个reducer可以管理各自的状态。

import { combineReducers } from 'redux';
import reducerOne from 'reducerOne.js'
import reducerTwo from 'reducerTwo.js'
const reducer = combineReducers({
  reducerOne,
  reducerTwo
});

export default reducers;

4.store

有了action作为触发器，有了reducer处理触发器，还差一个store，store作用是将整个内容都联系到一起。

import { createStore } from 'redux'
import reducers from 'reducers.js'

const store = createStore(reducers)

通过reducer来创建store。

通过store.getState()来获取状态树里的状态。

通过store.dispatch()来触发更改状态树

5.通过react-redux连接每个react文件

redux提供了状态管理，但反应到各个react还是很麻烦笨拙的，react-redux可以帮助我们跟好的连接redux和react文件。
主要有两个API

import { Provider } from 'react-redux'
import { render } from 'react-dom'

render(
  <Provider store = {store}>
    <App></App>
  </Provider>,
  document.getElementById('root')
)

provider作为高阶组件包裹根组件，给每个组件提供状态支持。

在每个react文件里，我们通过connect连接状态树。

export default connect(
  (state) => {
    return {
      reducerOne: state.reducerOne
    };
  },
  (dispatch) => {
    return {
      actions: bindActionCreators(actions,dispatch)
    }
  }
)(App)

用es6语法可以写成这样子

export default connect(
  ({ reducerOne }) => reducerOne,
  (dispatch) => {
    return {
      actions: bindActionCreators(actions,dispatch)
    }
  }
)(App)

contnect接收两个参数，第一个为整个应用的状态，第二个为action绑定。这样我们可以直接在App组件的props直接使用reducerOne和actions。