初学Redux

读忆
69 阅读3分钟

认识Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验. Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。

安装

npm install --save redux

初次使用

// store.js中
// 1. 导入依赖数据
import { createStore } from 'redux'
// 初始化数据
const initState = {
    num: 1
}

// 这是一个 reducer，形式为 (state, action) => state 的纯函数。
// 描述了 action 如何把 state 转变成下一个 state。
function reducter(state = initState, action) {
    // 当有数据进行更新时, 返回新的state
    if(action.type == 'CHANGE_NUM') {
        return  {...state, num: state.num + action.num}
    }

    // 没有新数据更新, 返回之前的state数据
    return state
}

const store = createStore(reducter)
export default store

// index.js中
import store from './store'

// 获取store的数据// 通过store的getState()
console.log(store.getState())  // {num: 1}

// 修改store中的数据: 必须通过action
store.dispatch({type: 'CHANGE_NUM', num: 10}) 
console.log(store.getState()) // {num: 11}
 
store.dispatch({type: 'CHANGE_NUM', num: -5})
console.log(store.getState())  // {num: 6}

// 每次 state 更新时，打印日志, 避免重复编写打印日志代码
// 注意 subscribe() 返回一个函数用来注销监听器
const unsubscribe  = store.subscribe(() => {
    console.log('store中的数据发生了变化', store.getState())
})

store.dispatch({type: 'CHANGE_NUM', num: 1}) // store中的数据发生了变化 {num: 7}
store.dispatch({type: 'CHANGE_NUM', num: 2}) // store中的数据发生了变化 {num: 9}
// 注销监听
unsubscribe();
store.dispatch({type: 'CHANGE_NUM', num: 3}) // 因为已经注销了监听器, 这里调用后就看不到打印数据
console.log(store.getState()) // {num: 12}


// 将action方法进行封装使用
const changeNumAction = (num) => ({
  type: "CHANGE_NUM",
  num,
});

store.dispatch(changeNumAction(2)); // store中的数据发生了变化 {num: 14}
store.dispatch(changeNumAction(20)); // store中的数据发生了变化 {num: 34}

三大原则

  • 单一数据源
    • 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
  • State 是只读的
    • 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
  • 使用纯函数来执行修改
    • 为了描述 action 如何改变 state tree ，你需要编写 reducers。
    • Reducer 一个纯函数，它接收先前的 state 和 action，并返回新的 state。

纯函数

  • 纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用
  • 数组的 slice 和 splice 分别是：纯函数 和 不纯的函数
    • slice：返回是数组中的指定部分，不会改变原数组
    • splice：对数组进行操作返回该数组，会改变原数组

基础

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。 一般来说你会通过 store.dispatch() 将 action 传到 store

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。 谨记 reducer 一定要保持纯净。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。

store

Store 就是把它们联系到一起的对象。Store 有以下职责：

维持应用的 state；

  • 提供 getState() 方法获取 state；
  • 提供 dispatch(action) 方法更新 state；
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。
avatar
文章
阅读
粉丝