redux|redux note reduxnote

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

使用createStore生成store树，如果需要中间件,把中间件放到applyMiddleware方法中传给createStore
根组件要嵌套在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