redux note

Redux 状态管理机制

redux就是把react项目的能用到的所有数据做个一个大整合，统一放在store中，一个项目里面只能有一个store,我们页面用用到的数据都通过mapStateToPorps方法传porps进来，铺到页面中来。如果在页面中需要对这些数据进行操作的通过使用mapDispatchToProps方法把数据输出给actions来进行逻辑处理，返回新的state，reducer函数接收新的state，更新到store上面，页面刷新。

store

• 使用createStore生成store树，如果需要中间件,把中间件放到applyMiddleware方法中传给createStore
• <Provider store={store}></Provider>根组件要嵌套在Provider组件中，并将创建的store作为prop传给Provider，才能使用connect()方法，而connect()方法能够获得 redux store。简单来说，只要是使用state的组件都是要放在Provider里面的，而且必须connect

页面组件

components

• 用来存放展示页面，可复用的页面
• 相当于container的子组件

container

• 有操作数据的页面，需要逻辑处理的页面

页面数据的输入和输出

• 数据的输入

  const mapStateToProps = state => ({
  data:state
  })

  在render里引进来const {data} = this.props
  好了完工，可以在页面中放心大胆的用了

• 数据的输出

  const mapDispathToProps = (dispatch) => {
  return{
  loadState:() => dispatch(loadState())
  }
  }

在页面中调用loadState方法，触发dispatch发出Action来一轮数据更新

• 页面末尾要使用connect()方法 很重要哦一定不能少
  `export default connect(mapStateToProps, mapDispatchToProps)(conponentName)

Action

• 我们页面中涉及到的数据处理，以及fetch都在action中处理

• Action 和Action Creator是不一样的。

• Action是一个对象，必须有一个type属性，这个type就是action的名字，其他属性就可以随便定义写你的数据。在页面中通过dsipatch发出action对象，这种写法好麻烦，所以一般都用Action Creator.

• 来个例子最明白

  export const loadState = () => dispatch => dispatch({
  type:'LOAD_STATE'
  data:'haha,I'm SiWen'
  })

Reducer

• Reducer 是一个函数，有当前state和action两个参数,返回一个新的state.一般要给一个初始state值

  const initialState ={data:''haha,I'm SiWen''}
  const reducer = (state = initialState, action) => {
  switch (action.type) {
  case LOAD_STATE:
  return {
  ...state,
  data:action.data
  }
  default:
  return {
  ...state
  }
  }
  }

• 一般我们会有很多的reducer,来独立负责管理state的一部分，这时候就要用到combineReducers函数了，它把多个reducer合并成一个最终的reducer，格式为stateName：reducerName

好了，根据我现在的理解就酱了