Redux

Redux

---

Redux提供一个可以预测的state状态管理器，让开发者可以更容易地开发复杂的javascript应用程序

Flux与Redux的差异

• 只使用一个 store 将整个应用程式的状态 (state) 用物件树 (object tree) 的方式储存起来：
  原生的 Flux 会有许多分散的 store 储存各个不同的状态，但在 redux 中，只会有唯一一个 store 将所有的资料用物件的方式包起来。

//原生 Flux 的 store
const userStore = {
    name: ''
}
const todoStore = {
    text: ''
}

// Redux 的单一 store
const state = {
    userState: {
        name: ''
    },
    todoState: {
        text: ''
    }
}

• 唯一可以改变 state 的方法就是发送 action，这部份和 Flux 类似，但 Redux 并没有像 Flux 设计有 Dispatcher。Redux 的 action 和 Flux 的 action 都是一个包含 type 和 payload 的物件。

• Redux 拥有 Flux 所没有的 Reducer。Reducer 根据 action 的 type 去执行对应的 state 做变化的函式叫做 Reducer。你可以使用 switch 或是使用函式 mapping 的方式去对应处理的方式。

• Redux 拥有许多方便好用的辅助测试工具（例如：redux-devtools、react-transform-boilerplate），方便测试和使用 Hot Module Reload。

Redux核心概念介绍

从上图我们可以看到Redux的大致处理流程可以分为 View -> Action -> Reducer,当使用者和 View 互动时会触发事件发出 Action，当 Action 进到 Reducer 时，Reducer 会根据，action type 去 mapping 对应处理的动作，然后回传回新的 state。View 则因为侦测到 state 更新而重绘页面。

redux的使用流程

import {createStore} from 'redux';
/** 
  下面是一个简单的 reducers ，主要功能是针对传进来的 action type 判断并回传新的 state
  reducer 规格：(state, action) => newState 
  一般而言 state 可以是 primitive、array 或 object 甚至是 ImmutableJS Data。但要留意的是不能修改到原来的 state ，
  回传的是新的 state。由于使用在 Redux 中使用 ImmutableJS 有许多好处，所以我们的范例 App 也会使用 ImmutableJS 
*/
function counter(state = 0,action){
    switch(action.type){
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
        }
    }
}
//创建Redux store来存放App所有的state
//store的可用API{subscribe,dispatch,getState}
let store  = createStore(counter);
//可以使用subscribe()来订阅states是否更新，但十五通常会用react-redux来串联React和Redux
store.subscribe(() =>
  console.log(store.getState());
);
// 若想改变 state ，一律发 action
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

Redux API入门

1.createStore：createStore(reducer, [preloadedState], [enhancer])
我们知道在 Redux 中只会有一个 store。在产生 store 时我们会使用 createStore 这个 API 来创建 store。第一个参数放入我们的 reducer 或是有多个 reducers combine（使用 combineReducers）在一起的 rootReducers。第二个参数我们会放入希望预先载入的 state 例如：user session 等。第三个参数通常会放入我们想要使用用来增强 Redux 功能的 middlewares，若有多个 middlewares 的话，通常会使用 applyMiddleware 来整合。

2.Store有四个方法
* getState()
* dispatch(action)
* subscribe(listener)
* replaceReducer(nextReducer)

Redux只有一个Store负责存放整个App的State,而唯一能改变State的方法只有发送action

3.combineReducers:combineReducers(reducers)combineReducers 可以将多个 reducers 进行整合并回传一个 Function，让我们可以将 reducer 适度分割

4.applyMiddleware:applyMiddleware(...middleware)在 Redux 中 Middleware 则是扮演 action 到达 reducer 前的第三方扩充。而 applyMiddleware 可以将多个 middlewares 整合并回传一个 Function，便于使用。

如果我们使用asynchronous(非同步)的行为的话，需要使用其中的一种middleware:redux-link,redux-promise或者redux-promise-middleware，这样可以让你在actions中dispatch Promise而非function。非同步运作方式如下。

5.bindActionCreators:bindActionCreator(actionCreator,dispatch)
bindActionCreators 可以将 actionCreators 和 dispatch 绑定，并回传一个 Function 或 Object，让程式更简洁。但若是使用 react-redux 可以用 connect 让 dispatch 行为更容易管理
6.compose:compose(...function)

import {createStore,combineReducers,applyMiddleware,compose}
import thunk from 'redux-thunk'
import DevTools from './containers/DevTools'
import reducer from '../reducers/index'

const store = createStore(
  reducer,
  compose(
    applyMiddleware(thunk),
    DevTools.instrument()
  )
)

博客参考github地址