Redux

Redux 是 JavaScript 应用程序的可预测状态容器。（相当于Model层） （不要与WordPress的框架Redux Framework混淆。）

它可以帮助您编写行为一致的应用程序，在不同的环境（客户端，服务器和本机）中运行，并且易于测试。

计数器示例

原始代码

import React from 'react';
class Counter extends React.Component {
  state = { count: 0 }
  increment = () => { this.setState({ count: this.state.count + 1 }); }
  decrement = () => { this.setState({ count: this.state.count - 1 }); }
  render() {
    return (
      <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.state.count}</span>
          <button onClick={this.increment}>+</button>
      </div>
  )}
}
export default Counter;

添加Redux 支持

function mapStateToProps(state) {
  return {
    count: state.count
  };
}
export default connect(mapStateToProps)(Counter);

什么是 connect ？

connect是一个高阶函数，它在你调用它时返回一个函数。然后使用组件调用该函数将返回一个新的（包装的）组件。

从mapStateToProps返回的对象将作为props提供给组件。上面的例子将state.count作为计数prop的值传递：对象中的键成为prop名称，其对应的值成为props的值。

代码变为：

import React from 'react';
import { connect } from 'react-redux';
class Counter extends React.Component {
  increment = () => { this.props.dispatch({ type: 'INCREMENT' }); }
  decrement = () => { this.props.dispatch({ type: 'DECREMENT' }); }
  render() {
    return (
      <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
      </div>
  )}
}
function mapStateToProps(state) {
  return {
    count: state.count
  };
}
export default connect(mapStateToProps)(Counter);

reducer

const initialState = {
  count: 0
};

export default function (state:State = initialState, action:Action): State {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

注意！！ STATE 是不变的。 永远不能改变。

const initialState = {
  count: 0
};

export default function (state:State = initialState, action:Action): State {
  switch(action.type) {
    case 'INCREMENT':
      // 不可以这样做！！！
      state.count++;
      return state;
    ...
    default:
      // 这个可以
      return state;
  }
}

创建 configureStore

import reducer from './reducers';
export default function configureStore(onCompletion:()=>void):any {
  const store = createStore(reducer);
  return store;
}

加载 configureStore

import configureStore from './configureStore'
// create our store
const store = createStore()
class App extends Component {
  render () {
    return (
      <Provider store={configureStore}>
        <RootContainer />
      </Provider>
    )
  }
}

持久化 和 从持久化恢复

import reducer from './reducers';
import { persistStore, autoRehydrate } from 'redux-persist';
export default function configureStore(onCompletion:()=>void):any {
  const enhancer = compose(
      applyMiddleware(thunk, promise),
      autoRehydrate()
  );
  const store = createStore(reducer, enhancer);
  global.reduxPersistor = persistStore(store, { storage: AsyncStorage }, onCompletion);
  return store;
}