Redux

Posted qinlinkun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Redux相关的知识,希望对你有一定的参考价值。

Redux的特点

  1. 统一的状态管理,一个应用中只有一个仓库(store)
  2. 仓库中管理了一个状态树(statetree)
  3. 仓库不能直接修改,修改只能通过派发器(dispatch)派发一个动作(action)
  4. 更新state的逻辑封装到reducer中

Redux能做什么?

随着javascript单页应用开发日趋复杂,管理不断变化的state非常困难,Redux的出现就是为了解决state里的数据问题。在React中,数据在组件中是单向流动的,数据从一个方向父组件流向子组件(通过props),由于这个特征,两个非父子关系的组件(或者称作兄弟组件)之间的通信就比较麻烦

 
技术图片
redux.png

redux中各对象的说明

store

store是一个数据仓库,一个应用中store是唯一的,它里面封装了state状态,当用户想访问state的时候,只能通过store.getState来取得state对象,而取得的对象是一个store的快照,这样就把store对象保护起来。

action

action描述了一个更新state的动作,它是一个对象,其中type属性是必须有的,它指定了某动作和要修改的值:

type: UPDATE_TITLE_COLOR, payload: ‘green‘

actionCreator

如果每次派发动作时都写上长长的action对象不是很方便,而actionCreator就是创建action对象的一个方法,调用这个方法就能返回一个action对象,用于简化代码。

dispatch

dispatch是一个方法,它用于派发一个动作action,这是唯一的一个能够修改state的方法,它内部会调用reducer来调用不同的逻辑基于旧的state来更新出一个新的state。

reducer

reducer是更新state的核心,它里面封装了更新state的逻辑,reducer由外界提供(封装业务逻辑,在createStore时传入),并传入旧state对象和action,将新值更新到旧的state对象上返回。

使用redux的流程

  1. 定义动作类型:
const INCREAMENT=‘INCREAMENT‘;
  1. 定义项目的默认状态,传入reducer
let initState=...;
function reducer(state=initState,action)
    //...

  1. 编写reducer,实现更新state的具体逻辑
function reducer(state=initState,action)
    let newState;
    switch(action.type)
        //...
    
    return newState;

  1. 创建容器,传入reducer
let store=createStore(reducer);
  1. 订阅需要的方法,当state改变会自动更新
store.subcribe(function());
  1. 在需要更新state的地方调用dispatch即可
store.dispatch(/*某个action*/);

可以看到通过以上几个步骤,就可以使用redux,且不局限于某种“框架”中,redux是一个设计思想,只要符合你的需求就可以使用redux。

在React中使用Redux

以下编写一个待办事项的小功能,描述如下:

  • 可以让用户添加待办事项(todo)
  • 可以统计出还有多少项没有完成
  • 用户可以勾选某todo置为已完成
  • 可筛选查看条件(显示全部、显示已完成、显示未完成)

以上是关于Redux的主要内容,如果未能解决你的问题,请参考以下文章

react全家桶从0搭建一个完整的react项目(react-router4reduxredux-saga)

react状态管理器

Redux 知识点 及 使用案例

Redux原理探索

React

React