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