redux学习笔记

以下是根据阮一峰老师的redux教程记录的一些学习笔记。

首先明确一点，redux是一个有用的框架，但不是非用不可。事实上，大多数情况，你可以不用它，只用react就够了。

“只有遇到react实在解决不了的问题，你才需要redux。”

简单说，如果你的UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂度。

• 用户的使用方式非常简单
• 用户之间没有协作
• 不需要与服务器大量交互，也没有使用WebSocket
• 试图层（View）只从单一来源获取数据

上面这些情况，都不需要使用redux。

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

上面这些情况才是redux的使用场景：多交互、多数据源。

从组建角度看，如果你的应用有以下场景，可以考虑使用redux。

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

发生上面情况时，如果不使用redux，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

另一方面，redux只是web架构的一种解决方案，也可以选择其他方案。

一、设计思想

redux的设计思想很简单，就两句话

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

二、基本概念和API

1.store

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

redux提供createStore这个函数，用来生成Store。

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

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

2.State

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

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

import {createStore} from ‘redux’;
const store=createStore(fn);
const state=store.getState();

redux规定，一个state对应一个View。只要State相同，View就相同。你知道State，就是知道View是什么样。

3.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。

4.Action Creator

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

const ADD_TODO='添加TODO';
funciton addTodo(text){
   return {
    type: ADD_TODO,
    payload:text
  } 
}    
const action=addTodo('Learn Redux');    

上面代码中，addTodo函数就是一个Action Creator。

5.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'));

6.Reducer

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

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

const reducer=function(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。

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

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