react(十五)redux的应用

redux

安装 Redux

  • npm i redux
  • yarn add redux

了解 redux

  • state 状态
  • reducer 纯函数 - 提供修改状态的方法
  • store 仓库 - 管理状态
  • action 动作
    • 对 state 的修改动作
state 对象
  • 通常我们会把应用中的数据存储到一个对象树(Object Tree)中进行统一管理,我们把这个对象树称为:state

state 是只读的。这里需要注意的是,为了保证数据状态的可维护和测试,不推荐直接修改 state 中的原数据。

通过纯函数修改 state

  • 什么是纯函数 reducer ?
    • 相同的输入永远返回相同的输出
    • 不修改函数的输入值
    • 不依赖外部环境状态
    • 无任何副作用
  • 使用纯函数的好处
    • 便于测试
    • 有利重构
action 对象
  • 对 state 的修改是通过 reducer 纯函数来进行的,同时通过传入的 action 来执行具体的操作,action 是一个对象
  • type属性 : 表示要进行操作的动作类型,增删改查……
  • payload属性 : 操作 state 的同时传入的数据

但是这里需要注意的是,我们不直接去调用 Reducer 函数,而是通过 Store 对象提供的 dispatch 方法来调用

Store 对象
  • 为了对 state,Reducer,action 进行统一管理和维护,我们需要创建一个 Store 对象

redux 三大原则

  • 单一数据源: 整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
  • state 是只读的: 唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象
  • 使用纯函数来执行修改 state
import React from "react";
import ReactDOM from "react-dom";
import {createStore} from "redux";
function reducer(state={
  count: 1
},action) {
    switch (action.type) {
      case "ADD":
        return {
          count: state.count + 1
        }
      case "MINUS":
        return {
          count: state.count - 1
        }
    }
    return state;
}
const store = createStore(reducer);
const unSubscribe = store.subscribe(()=>{
  render();
});
function render() {
  ReactDOM.render(
    <div>
        <p>{store.getState().count}</p>
        <button onClick={()=>{
           store.dispatch({
              type: "ADD"
            })
        }}>递增</button>
        <button onClick={()=>{
           store.dispatch({
              type: "MINUS"
            })
        }}>递减</button>
         <button onClick={()=>{
           unSubscribe();
        }}>取消监听</button>
    </div>,
    document.querySelector("#root")
  )
}
render();

redux API

  • createStore(reducer, [preloadedState], enhancer);
    • reducer (Function): 接收两个参数,分别是当前的 state 树和要处理的 action,返回新的 state 树。
    • [preloadedState] (any): 初始时的 state。 在同构应用中,可以决定是否把服务端传来的 state 后传给它,或者从之前保存的用户会话中恢复一个传给它。如果你使用 combineReducers 创建 - reducer,它必须是一个普通对象,与传入的 keys 保持同样的结构。否则,你可以自由传入任何 reducer 可理解的内容。
    • enhancer (Function): Store enhancer 是一个组合 store creator 的高阶函数,返回一个新的强化过的 store creator。这与 middleware 相似,它也允许你通过复合函数改变 store 接口。
    • 返回值 (Store): 保存了应用所有 state 的对象。改变 state 的惟一方法是 dispatch action。你也可以 subscribe 监听 state 的变化,然后更新 UI。
  • reducer
    • reducer(state,action)
  • Store
    • getState()
    • dispatch(action)
    • subscribe(listener)
    • replaceReducer(nextReducer)
  • combineReducers(reducers)
    将 reducer 函数拆分成多个单独的函数,拆分后的每个函数负责独立管理 state 的一部分
  • applyMiddleware(…middlewares) 中间件
  • 15
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值