React redux

原创

堕落飞鸟

发布于 2023-05-20 11:50:58

1.5K00

代码可运行

文章被收录于专栏：飞鸟的专栏飞鸟的专栏

运行总次数：0

代码可运行

Redux概述

Redux是一个JavaScript状态管理库，它可以与任何JavaScript应用程序一起使用，不仅限于React。Redux基于单一状态树的概念，应用程序的所有状态都保存在一个对象中。通过使用Redux，可以以一种可预测和可维护的方式管理应用程序的状态，并使用纯函数来处理状态的变化。

Redux的核心概念包括：b

Store（存储）：存储应用程序的状态。它是唯一的，并且由Redux库创建。
Action（动作）：描述状态变化的事件。它们是纯JavaScript对象，包含一个类型和一些可选的数据。
Reducer（归约器）：纯函数，用于根据给定的动作来处理状态的变化。
Dispatch（派发）：触发动作的方法，将动作发送给存储。
Subscribe（订阅）：订阅存储的方法，用于在状态发生变化时执行回调函数。

React Redux是Redux在React应用程序中的绑定库，它提供了一些特殊的组件和API，以便在React组件中访问和更新Redux存储的状态。

安装React Redux

在开始使用React Redux之前，您需要先安装Redux和React Redux库。您可以使用以下命令使用npm或yarn进行安装：

npm install redux react-redux

或

yarn add redux react-redux

安装完成后，您可以开始在React应用程序中使用React Redux。

创建Redux存储

首先，让我们创建一个Redux存储来管理应用程序的状态。在Redux中，存储是通过使用createStore函数创建的。在创建存储时，需要传入一个归约器函数，用于处理状态的变化。

下面是一个简单的示例，创建了一个Redux存储：

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

// 初始状态
const initialState = {
  count: 0,
};

// 归约器函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 创建存储
const store = createStore(reducer);

export default store;

在上述示例中，我们首先定义了初始状态和一个归约器函数来处理状态的变化。然后，我们使用createStore函数创建了Redux存储，并将归约器函数作为参数传递给它。最后，我们将创建的存储导出，以便在应用程序中使用。

在React组件中使用Redux

在React Redux中，我们可以使用<Provider>组件将Redux存储传递给应用程序的根组件。这样，所有的子组件都可以通过使用特殊的useSelector和useDispatch钩子来访问和更新存储中的状态。

下面是一个示例，展示了如何在React组件中使用Redux：

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
};

export default App;

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

在上述示例中，我们首先在根组件App中使用<Provider>组件将Redux存储传递给应用程序。然后，在Counter组件中使用useSelector钩子从存储中选择状态，并使用useDispatch钩子获取dispatch方法来触发动作。在按钮的点击事件中，我们分别调用dispatch方法发送INCREMENT和DECREMENT动作来更新状态。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react