Redux 基础学习总结

转自: Redux 入门教程（一）：基本用法

做了几个关于 redux 的小 demo 之后再次看了看阮老师的 redux 入门教程，感觉清晰了好多。摘录一下，作为记录。

Redux 基础学习总结

Redux 的适用场景：多交互、多数据源。

从组件的角度看，redux 的应用场景：

某个组件的状态需要共享
某个组件需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

发生上面情况时，如果不适用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。那么我们就需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

Redux 只是 web 架构的一种解决方案，我们也可以选择其他的状态管理工具。

Redux 的设计思想

Web 应用是个状态机，视图与状态是一一对应的
所有的状态保存在一个对象里面。

基本概念和 API

Store

store 就是保存数据的地方，整个应用只能有一个 store。

Redux 提供 createStore 这个函数，用来生成 store。

import { createStore } from 'redux';
const store = createStore(fn);

上面代码中，createStore 函数接受另一个函数作为参数，返回新的 store 对象。

State

State 对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点数据的集合就叫做 State。

当前时刻的 State，可以通过 store.getState() 拿到。

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Redux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。

Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象，其中的 type 属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。

const action = {
    type: 'ADD_TODO',
    payload: 'learn Redux'
}

上面代码中，Action 的名称是 ADD_TODO，它携带的信息是字符串 learn Redux。

可以这样理解，Action 描述当前发生的事情。改变 State 的唯一方法，就是使用 Action。它会运送数据到 Store。

Action Creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫做 Action Creator。

const ADD_TODO = '添加 TODO'；
function adTodo(text) {
    return {
        type: ADD_TODO,
        text
    }
}

const action = addTodo('learn Redux');

store.dispatch()

store.dispatch() 是 View 发出 Action 的唯一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
    type: 'ADD_TODO',
    payload: 'learn Redux'
});

上面的代码， store.dispatch 接收一个 Action 的对象作为参数，将它发送出去。

结合 Action Creator，这段代码可以改写如下：

store.dispatch(addTodo('learn Redux'));

Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接收 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = (state, action) {
    // 。。。
    return new_state;
}

整个应用的初始状态，可以作为一个 State 的默认值。下面是一个实际的例子。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});

上面代码中，reducer 函数收到名 ADD 的 Action 以后，就返回一个新的 State ，作为加法的计算结果。其他的运算逻辑，也可以根据 Action 的不同来实现。

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux';
const store = createStore(reducer);

可以理解为 reducer 中是触发状态改变的核心逻辑

纯函数

reducer 函数最重要的特征是，他是一个纯函数，也就是说，只要是同样的输入，必定得到同样的输出。

由于 reducer 是纯函数，就可以保证同样的 State，必定得到同样的 View。但也正是因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，参考下面的写法。

// State 是一个对象
function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一个数组
function reducer(state, action) {
  return [...state, newItem];
}

最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。

store.subscribe()

Store 允许使用 store.subscribe() 方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux';
const store = createStore(reducer);

store.subscribe(listener);

显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();

如果不使用 react-redux，那么可以使用 store.subscribe() 函数监听 render 函数的变化，从而连接 react 组件和 redux.

工作流程

首先, 用户发出 Action.
```
store.dispatch(action);
```
然后,Store 自动调用 Reducer,并且传入两个参数: 当前 State 和收到的 Acton. Reducer 会返回新的 State.
```
let nextState = todoApp(previousState, action);
```
State 一旦有变化，Store 就会调用监听函数。
```
// 设置监听函数
store.subscribe(listener);
```
listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
```
function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}
```

posted @ 2020-12-04 22:34 公瑾当年阅读(129) 评论(0) 编辑收藏举报

刷新页面返回顶部

公瑾当年のblog

Redux 基础学习总结