redux学习

你可能不知道的redux
首先明确一点，Redux是一个有用的架构，但不是非用不可。事实上，大多数情况下你可以不用它，只用react就够了。
如果你的UI非常简单，没有很多互动，那么就没必要用redux了，用了反而更加复杂。

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

上面这些情况都不需要使用Redux

• 用户的使用方式复杂
• 不同身份的用户有不同的方式（比如普通用户和）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用webSocket

• View 要从多个来源获取数据

  上面这些情况才是Redux的使用场景：多交互、多数据源。
  从组件角度看，如果你的引用有如下场景，可以考虑使用Redux

• 某个组件状态，需要共享

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

发生上面情况时，如果不适用redux或者其他管理工具，那么代码很快就会变成一团乱麻，很难理清。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

一、设计理念
redux的设计思想很简单，就两句话
（1）web应用是一个状态机，视图和状态一一对应。
（2）所有的状态都保存在一个对象中。
二、基本概念和API
2.1 store
store是保存数据的地方，你可以把它看成一个容器，整个应用只能有一个store。
Redux提供 createStore 这个函数，用来生成Store。

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

上面代码中，createStore 函数接受另外一个函数作为参数，返回新生成的Store对象。
2.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长什么样子。反之亦然。
2.3 Action
State的变化，会导致view的变化。但用户接触不到State，只能接触到view。所以，State的变化必须是View导致的。Action就是View发出的通知，表示State应该要发生变化了。
Action是一个对象，其中type属性是必须的。表示Action的名称。其他属性可以自由设置。

const action = {    type: 'ADD_TODO',    text: 'Learn redux'}

上面的代码中Action的名字是ADD_TODO,它携带的字符串信息是Learn redux。可以这样理解，Action描述当前发生的事情。改变State的唯一方式，就是使用Action。它会运送数据到Store。
2.4 Action Creator
View要发送多少种消息，就会有多少种Action。如果手写，会很麻烦，可以定义一个函数来生成Action，这个函数就叫做Action Creator。

const ADD_TODO = 'ADD_TODO';function addTodo(text){    type: ADD_TODO,    text}

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

import { createStore } from 'redux';const store = createStore(fn);store.dispatch({    type: 'ADD_TODO',    payLoad: 'Learn-redux'})

上面代码中，store.dispach接受一个Action对象作为参数，将它发送出去。
结合Action Creator，这段代码改写如下，
store.dispatch(addTodo(‘Learn Redux’));