初识 react-redux
一、数据流,react-redux是什么?为什么使用react-redux?
数据流是什么?
行为与响应的抽象
为什么使用数据流?
帮助我们明确了解行为与对应的响应
react与数据流的关系?
react是纯V框架,需要数据流支撑
为什么使用redux?
官方绑定的单项数据流Flux比较重
redux比较简单,单一状态树
非常小,压缩后大概只有2K
单项数据流?
传统MVC Model和View可以互相影响,导致数据混乱
单数据流store 向view传输,操作View更新,在有用户发出新的指令分发到Displatcher上
二、React-Redux的用法
action – 行为的抽象
需要一个固定的type,且唯一
是一个js对象,一般由方法生成
const addTodo = (text)=>{ renturn { type:'ADD_TODO', id:nextTodoId ++, text } }
reducer – 是响应的抽象
是纯方法
返回新状态
返回一个新对象,不修改当前state
state 当前的stage
根据传入action的type决定怎么做
const todos = (state=[],action) => { switch(action.type){ case ADD_TODO : return [ ...state,{ text:action.text, completed:false } ] case COMPLETE_TODO : let arr = []; state.map((item,i)=>{ if (i == action.index) { item.completed = !item.completed }; arr.push(item) }) return arr default : return state } }
store – 是state和reducer的混合体、所有数据和状态的存储
action 做用于 store
reducer 根据 store响应
state 可预测
store是唯一的
由 createStore 方法生成
import {createStore} from 'redux'; import rootReducer from './reducer/index'; const store = createStore(rootReducer);
Provider – 让容器组件拿到state
let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
combineReducers – 合并多个Reducer
需要特别注意,使用combineReducers来合并reducer,需要子reducer的名字跟对应要接收的state的key一致
import { combineReducers } from 'redux'; const chatReducer = combineReducers({ chatLog, statusMessage, userName }) export default todoApp;
如果不同名,就要采用下面的写法。
const reducer = combineReducers({ a: doSomethingWithA, b: processB, c: c }) // 等同于 function reducer(state = {}, action) { return { a: doSomethingWithA(state.a, action), b: processB(state.b, action), c: c(state.c, action) } }
connent – 用于从 UI 组件生成容器组件
mapStateToProps 负责输入逻辑,即将state映射到 UI 组件的参数(props)
负责输出逻辑,即将用户对 UI 组件的操作映射成 Action。
TodoList UI组件
const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList)
mapStateToProps() – 把状态绑定到组件的属性当中。
第二个参数,代表容器组件的props对象 这个是一个传递给 所有属性的对象。
const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } }
mapDispatchToProps() – 用来建立 UI 组件的参数到store.dispatch方法的映射
是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数
const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter: filter }; }
dispatch – 是 View 发出 Action 的唯一方法。
function mapDispatchToProps(dispatch){ return { changeName(name){ dispatch({ type:'ADD_NAME', name }) } } }