首先，您需要通过或将 redux 和 react-redux 软件包安装到项目中。npm``yarn

您只需使用一行代码即可安装它们：

npm install redux react-redux --save

或与纱线：

yarn add redux react-redux

现在返回项目并使用以下名称创建3个文件：

action.js，reducer.js 和 store.js

打开action.js文件。我们应该为此应用程序执行两个操作。一种用于增加，另一种用于减少。

在 action.js中

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

const increment = () => ({type: INCREMENT_COUNTER});
const decrement = () => ({type: DECREMENT_COUNTER});

export {
  INCREMENT_COUNTER,
  DECREMENT_COUNTER,
  increment,
  decrement
}

动作是简单的函数，从组件分派到redux，用于store通过化简器更改（状态）。

所以我们应该更改 reducer.js ：

import {INCREMENT_COUNTER, DECREMENT_COUNTER} from "./action";

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case(INCREMENT_COUNTER):
      return {
        ...state,
        counter: state.counter + 1
      };
    case (DECREMENT_COUNTER):
      return {
        ...state,
        counter: state.counter - 1
      };
    default:
      return state
  }
};

export default reducer

使用redux的3条主要原则：

1-真理的单一来源。整个应用程序的状态存储在单个存储中的对象树中。

2-状态为只读。更改状态的唯一方法是发出一个动作，一个描述发生了什么的对象。

3-使用纯功能进行更改。

根据第二个原则，我们必须假定状态是不可变的，并且每种情况（在开关中）都必须单独返回状态。在返回状态中使用…
state表示如果initialState将来会更改，则这些情况将正常工作（在此示例中，这是没有必要的）。

我们的行动职能是纯粹的（第三原则）

最后一个新文件 store.js ：

import {createStore} from "redux";
import reducer from './reducer'

const store = createStore(reducer);

export default store;

现在我们应该将此商店应用于我们的App组件。因此，打开App.js文件并进行以下更改：

在 App.js中 ：

import React, {Component} from 'react';
import CounterApp from './CounterApp'
import {Provider} from 'react-redux'
import store from './store'

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CounterApp/>
      </Provider>
    );
  }
}

export default App;

提供包裹的CounterApp组成部分，将传播store到App与CounterApp所有其他的子组件。

最后，更改 CounterApp.js ：

import React, {Component} from 'react';
import {connect} from "react-redux";
import {increment, decrement} from "./action";

class CounterApp extends Component {

  handleIncrement = () => this.props.dispatch(increment());

  handleDecrement = () => this.props.dispatch(decrement());

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>Increment</button>
        <p>{this.props.counter}</p>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const counter = state.counter;
  return {counter}
};

export default connect(mapStateToProps)(CounterApp);

我们正在使用increment＆decrement操作将操作分派到redux。

将state被删除，而不是状态中，我们创建一个特殊的功能mapStateToProps' and useconnect`的状态连接组件的道具。

大功告成！