React手稿之 React-Redux

2019年9月20日 137次阅读来源: 小翼

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

在线实例