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);

 

posted @ 2017-10-13 18:25  方小川  阅读(177)  评论(0编辑  收藏  举报