redux的学习笔记

redux的出现是为了解决正常代码解决不了的问题，在使用前先想下，是否真的有必要去使用它，如果答案是否，那就不使用。

redux

安装

npm install --save redux
npm install --save react-redux

动机(motivation)

现在前端的状态越来越多，包含后端返回的，缓存中的，以及本地处理状态的一些数据等。还有些UI界面展示所需的状态也越来越复杂，包含active 路由/选中的tabs/loading/分页的控制等。

处理变化的数据是很困难的，尤其当model跟model之间有关联，相互影响，并会在页面上做更新

react一直在处理数据，那些突变和异步的数据(mutation and async)，单独处理是很容易，但是合在一起会复杂，所以有了redux去处理这些数据。

actions：表示用户做的一些操作

states：是redux定义的一些常量

reducers：是将actions和states结合起来的一个方法，是一个纯函数，获取之前的state，结合action，返回下一个state

通常会些很多小的reducer去分解大的reducers

核心(core)

所有的state都是存放在一个大的object树中，而这个object树是一个简单的store。

state只读，不能直接修改

reducer是一个纯函数，获取之前的state，结合action，返回下一个state，是返回的一个新的对象，不是在之前的对象上修改。

API

createStore(reducer,[preloadedState],[enhancer])

reducer(function)：给当前的state和要进行操作的action，返回一个新的state树

preloadedState：store的初始值

returns

store：一个包含所有state的对象，只有通过dispatch action去改变，也可以订阅这个变化去更新页面UI的值

import {createStore} from 'redux'

function todo(state=[],actions){
    switch(actions.type){
        case "ADD_TODO":
            return state.concat(actions.text)
        default:
            return state
    }
}

const store=createStore(todo,['Redux InitValue'])

store.dispatch({
    type:"ADD_TODO",
    text:"NEW TODO"
})

console.log(store.getState())  //['Redux InitValue','NEW TODO']

注意点：

1. 不要create多个(>1)个store，可以使用combineReducers去create根节点。

2. 随你选择state的类型，可以是object或者其他不可变的类型。

3. 如果选择了state的类型是object，返回值的时候，千万别使用'Object.assign(state,newValue)'，记得这样使用'Object.assign({},state,newValue)''，这样不会重载之前的state，也就是说不会修改之前的state值。或者使用'{...state,...newValue}'

Object.assign(state,newValue)//错误

Object.assign({},state,newValue)//正确

{...state,...newValue}//正确

4. 当store被创建成功，但是dispatch一个无效的action，这时reducer返回一个初始值。

store

store包含整个state树，改变里面的state的唯一方法是dispatch一个action

store不是一个class，他是一个对象，只是包含很多方法

包含的方法有：getState() dispatch(action) subscribe(listener) replaceReducer(nextReducer)

getState()：返回当前state树，也就是说是store的reducer返回的最新的值

dispacth()：这是唯一改变state变量的方法

如果action里面包含异步的操作，可以使用类似Promise/thunk/Observable，可以安装redux-thunk/redux-promise

subscribe(listener)：增加了一个改变的监听器，可以在action被dispatch时被调用，以及在state树深层的东西被改变时调用。也可以在callback时调用getState()，获取最新的state树。

中间件(middleware)

使用中间件的场景一般是处理action异步的操作。比如：redux-thunk

以上是我看原文的的理解啦，包含常用的方法和一些基础的理解。

点击这，查看原文连接。