React-Redux 如何工作？

Redux 如何与 React 协同工作？让我们看看，在本教程中，我们尝试学习 react-redux 的概念（适合初学者），我们将使用 react-redux 创建一个小型的增量 - 减量应用程序，我认为这是学习此类复杂概念的最佳示例，那么让我们开始吧。

-————————————————

首先使用npx create-react-app app-name以下组件创建您的 React App 并安装：

→npm install react-redux redux

完成所有安装和创建应用程序后，输入命令npm start来运行您的应用程序并按照以下步骤操作：-

重要提示： - 编号有问题，请调整
-————————————————

在 src 中创建名为 actions 的文件夹，并在 action 文件夹中创建名为 index.js 的文件，在该文件内我们将创建诸如 INCREMENT / DECREMENT 之类的操作，基本上我们将其称为要执行的操作类型，并在 index.js 文件中编写以下代码

// .actions/index.js
export const incNumber = () => {
    return {
        type:"INCREMENT"
    }
}
export const decNumber = () => {
    return {
        type:"DECREMENT"
    }
}
export const resetNumber = () => {
    return {
        type:"RESET"
    }
}

在此文件中，我们创建了将由使用方法的操作触发的函数dispatch，在此文件中，我们创建了 3 个函数并使用 export 关键字分别导出它们，这里inNumber()将触发“INCREMENT”方法等等。

在 src 中创建另一个名为的文件夹reducers，并在 reducers 文件夹内创建文件upDown.js和index.js。upDown.js我们将创建一个可以改变应用程序状态的函数。upDown.js文件将包含以下代码。

该文件将包含“如何执行”场景。

//reducer/upDown.js
    const initialState = 0;
    // It is always better to initial our state with 0 or to initialize 
    const changeTheNumber = (state = initialState, action) => {
      switch (action.type) {
        case "INCREMENT":
          return state + 1;
        case "DECREMENT":
          return state - 1;
        case "RESET":
            return state = 0;
        default:
          return state;
      }
    };

    export default changeTheNumber;

然后，我们将从文件中index.js导入函数，这里我们将使用redux 并创建函数，这是最重要的一步，创建后我们将导出它，如下所示ChangeTheNumberupDown.jsCombineReducersrootReducersrootReducers

// ..reducers/index.js
    // Imprting reducer from upDown file 
    import changeTheNumber from "./upDown";
    // Importing combineReducers object 
    import { combineReducers } from "redux";

    // Creating RootReducer 
    const rootReducer = combineReducers({
        changeTheNumber
    })

    //Exporting rootReducer
    export default rootReducer;

在此步骤中，我们将为我们的 react-redux 应用程序创建一个商店，因此我们需要使用将 react-redux 包安装到您的应用程序中npm install react-redux（如果已经安装，请忽略），安装后在 store.js 文件中写入以下代码

// src/store.js
    import { createStore } from 'redux'

    // Importing RootReducers
    import rootReducer from './reducer/index'

    //Creating Store and passing rootreducer
    const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

    export default store;

我们将导出该存储并将其导入到 index.js 中，使其成为全局存储。下一步我们将介绍如何将其设为全局存储。

从 src 转到 index.js 文件，在这里导入我们从 store.js 文件导出的 store，并从 react-redux 导入 Provider，如下所示。

// index.js
    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import store from "./store";
    import { Provider } from "react-redux";

    store.subscribe(() => console.log(store.getState()));

    ReactDOM.render(
      <React.StrictMode>
        <Provider store={store}>
          <App />
        </Provider>
      </React.StrictMode>,
      document.getElementById("root")
    );

    reportWebVitals();

您的 index.js 文件将如下所示，这里我们将我们的 App 包装在里面并将 store={store} 作为 prop 传递

（如果需要，您可以使用 redux devtool：并添加以下代码来使用devtool，在浏览器中查看 reducer 是可选的，但使用 reducer 变得容易）

store.subscribe(() => console.log(store.getState()));

最后一步：打开 app.js 文件，导入我们在/actions/文件中创建的函数，例如{ decNumber, incNumber, resetNumber }创建一个变量来保存状态结果。我们使用 dispatch 方法来触发事件，例如 dispatch(functionName())。最终，我们的 app.js 文件将如下所示 →

    import "./App.css";
    import {useSelector, useDispatch } from 'react-redux'
    import { decNumber, incNumber, resetNumber } from "./action";

    function App() {

      const myState = useSelector((state) => state.changeTheNumber )
      const dispatch = useDispatch();

      return (
        <div className="App">
          <h2>Increment / Decrement Counter</h2>
          <h4>Using React and Redux</h4>

          <div className="quantity">
            <button className="quantity_minus" title="Decrement" onClick={() => dispatch(decNumber())}>
              <span> - </span>
            </button>
            <input
              name="quantity"
              type="text"
              className="quantity_input"
              value={myState}
            />
            <button className="quantity_plus" title="Increament" onClick={() =>dispatch(incNumber())} >
              <span> + </span>
            </button>
            <button className="quantity_plus" title="Reset Count" onClick={() =>dispatch(resetNumber())} >
              <span> Reset </span>
            </button>

          </div>
        </div>
      );
    }

    export default App;

应用程序如下所示：-

以上就是我们在 React 应用中实现 React-redux 的方法，希望本教程对您有所帮助。谢谢。

文章来源：https://dev.to/shubhamathawane/react-redux-how-its-works--13g6