React-Redux基础
-
基本概念
核心：store ->action ->reducer->state
三大原则：单一数据源，State 是只读，纯函数来执行
-
主要组件
-
Action:
通过dispatch传递数据到store
import { GET_NET_VALUE } from './actionTypes' // 创建action export const getAllPersonAction = (value) => ({ type:CHANGE_ADD_VALUE, value }) // 通过thunk中间件返回函数体 // 获取所有成员 export const getAllPerson = () => { return ((dispatch)=>{ axios.post('/person').then((res) => { let data = res.data.data // 整理数据源 let newV = data.map((v,i) => { let newObj = v newObj["key"] = i.toString() return newObj }) let action = getAllPersonAction(newV) dispatch(action) }) }) } // ../other.js // 组件加载完成调用 componentDidMount() { let action = getAllPerson() store.dispatch((v)=>action(v)) } -
Reducer
Reducers 是描述如何响应action更新state
const defaultState = { } // 简单 处理action function doNet(state = initialState, action) { switch (action.type) { // 处理net数据 case GET_NET_VALUE: let netState = JSON.parse(JSON.stringify(state)) netState.dataSource = action.dataSource return netState default: return state } } -
Store
- 维持应用的 state；
- 提供
getState()方法获取 state； - 提供
dispatch(action)方法更新 state； - 通过
subscribe(listener)注册监听器; - 通过
subscribe(listener)返回的函数注销监听器。
// 订阅store的改变 store.subscribe(()=>{ console.log(store.getState()); this.setState(store.getState()) }) componentDidMount() { let action = getAllPerson() store.dispatch((v)=>action(v)) }
-
