React学习(八):Redux基础
2017-11-06 15:02
387 查看
一 Action
1.Action
它是把数据从应用传到store的有效载荷,它是store数据的唯一来源,一般说来,view层的变化可以反映到Action上,然后通过store.dispatch()将action传到store,reducer在根据action和现有的state来更新状态。Action是一个js的普通对象,唯一的约束就是type属性。那么Action是由谁创造的呢?2.Action Creator
Action创建函数就是生成Action的方法,返回值就是一个Action,function addTodo(text) { return { type: ADD_TODO, text } }
二 Reducer
1.Reducer
Action描述的是有事情发生,但是并没有指出如何更新state,这是通过Reducer来完成的。其实在每次dispatch(action)后就会触发reducer函数;它接收旧的state和action并根据action.type来更新state并返回nextState(这里是先复制一个state,然后在此基础上修改生成nextState);使用返回的nextState完全替换掉当前的state。2.纯净
Reducer纯净很重要,不要在Reducer里做如下操作:修改传入的参数;执行有副作用的操作,如API请求和路由跳转;调用非纯函数,如Date.now()或Math.random();function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } }
3.注意
不要修改state,每次要复制state然后进行修改更新,可使用如map,filter等方法。在default情况下返回旧的state。
三 store
1.store
Redux应用只有一个单一的store,其管理着唯一的应用状态state,state是不可以直接被修改的,只有通过dispatch一个action才可以进行修改。2.职责:
维持应用的state;提供getState()方法获取state;
提供dispatch(action)方法更新state;
通过subscribe(listener)注册监听器;
通过subscribe(listener)返回的函数注销监听器。
3.createstore
createstore是用来生成store的,如:let store = createStore(todoApp, window.STATE_FROM_SERVER);它接收两个参数,第一个为reducer,即监听到改变后就自动调用reducer,第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用,服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state直接用于本地数据初始化。
四 数据流
Redux的生命周期遵循下面的四个步骤:1.调用store.dispatch(action)
Action就是一个描述了发生了什么的对象。2.Redux store 调用传入的 reducer 函数
store会把两个参数传入reducer:当前的state树和action,reducer以此进行更新状态。3.根reducer返回唯一的state
Redux 原生提供combineReducers()辅助函数,来把根 reducer 拆分成多个函数,用于分别处理 state 树的一个分支,最终返回唯一的一个状态树。4.store保存了根reducer返回的state树
这个新的树就是应用的下一个 state!所有订阅 store.subscribe(listener) 的监听器都将被调用;监听器里可以调用 store.getState() 获得当前 state。现在,可以应用新的 state 来更新 UI。如果你使用了 React Redux 这类的绑定库,这时就应该调用 component.setState(newState) 来更新。
相关文章推荐
- React Native基础——环境配置、学习资源分享
- react学习总结1--基础(一)
- react学习笔记1--基础知识
- React Native学习笔记(五)Redux基础学习
- react && redux 学习笔记(二)
- 前端工程化学习(react+webpack+redux-form+支持ie8)
- React学习笔记_react-redux原理分析
- redux在react中的应用(基础篇)
- React学习(一)——基础项目搭建以及环境配置
- react-redux学习笔记-2-react-redux
- react基础学习
- 学习react,redux,router,antd的一些感悟(见解)
- React基础语法学习
- react-native 基础知识的学习
- React Router基础学习笔记
- react学习总结2--基础(二)
- 一步一步学习 ReactNative + Redux(3.2:优化,消除魔术字段)
- React-Redux学习小记
- React学习笔记——基础
- React && Redux 学习笔记(一)