React手稿之 React-Redux

React-Redux

Redux

• Action

  function addTodo(text) {
    return {
      type: ADD_TODO,
      text
    }
  }

  type 属性是必须的。

• Reducer

  function todoApp(state = initialState, action) {
    switch (action.type) {
      case ADD_TODO:
        return Object.assign({}, state, {
          todo: action.todo
        })
      default:
        return state
    }
  }

  1、需要一个case与action的type一致。

  2、必须在switch的defautl返回原state。

• Store

  • 管理整个应用的 state
  • 提供getState()方法，可以获取state
  • 通过dispatch(action)设置state
  • 提供subscribe(listener)注册和取消注册监听事件

React-Redux

是Redux的React实现,可参考 Official React bindings for Redux.

安装

yarn add redux react-redux

//or

npm i redux react-redxu

组件层级划分

• 表现性组件

  只负责显示UI的组件。

  例如：

  <div></div>

• 容器性组件

  不处理UI的组件，也不处理数据，只为UI组件提供数据的组件。

  例如：

  connect(state => state)(<YourComponent />)

• 其他组件

  除以上两种组件以外的组件。

使用Redux

我们以一个计数器的例子来说明如何使用React-redux.

• 设计表现性组件

  需要：显示当前计数，默认为0；累加按钮，每次单击加1；递减按钮，每次单击减1；重置按钮，单击将计数设置为0。

  import React from 'react';
  
  export default ({counter = 0}) => {
  
    const styles = {
      display: 'flex',
      justifyContent: 'space-around'
    };
  
    return (
      <div>
        <h1>当前计数为：{counter}</h1>
        <div style={styles}>
          <button>加</button> <button>减</button> <button>重置</button>
        </div>
      </div>
    );
  };

• 设置容器性组件

  目的是将表现性组件中的数据抽离出去交给redux管理，然后通过容器性组件将redxu与表现性组件关联起来。

  import { connect } from 'react-redux';
  import CounterIndex from '../components/chapter03/Counter';
  
  export default
    connect(state => ({ ...state.counterRedux }))(({ counter, dispatch }) => <CounterIndex counter={counter} dispatch={dispatch} />);

• • Action

    export const COUNTER_ACTION = 'COUNTER_ACTION';
    
    export const addActioner = ({counter}) => {
      return {type: COUNTER_ACTION, counter: counter + 1};
    };
    
    export const subActioner = ({counter}) => {
      return {type: COUNTER_ACTION, counter: counter - 1};
    };
    
    export const resetActioner = () => {
      return {type: COUNTER_ACTION, counter: 0};
    };

• Reducer

  import { COUNTER_ACTION } from '../actions/CounterAction';
  
  export default (state, action) => {
    switch (action.type) {
      case COUNTER_ACTION:
        return { ...state, counter: action.counter };
      default:
        return state;
    }
  }

• Store

  import React from 'react';
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  import CounterReducer from '../reducers/CounterReducer';
  
  let store = createStore(CounterReducer);
  
  export default ({ children }) => <Provider store={store}>{children}</Provider>

Redux 调试插件

• console日志

  安装redux-logger组件：yarn add redux-logger --dev。

  然后加入到redux store中即可：

  import { createLogger } from 'redux-logger';
  
  store = createStore(reducers, createLogger());

  例如：

  

• redux扩展程序

  需要在Chrome应用市场安装Redux DevTools.

  然后在store中使用增强功能将redux-logger加入即可：

  const logger = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(createLogger());
  store = createStore(reducers, logger);

在线实例

推荐阅读《React 手稿》