用最简单的方法构建一个React项目中的Redux

2023-10-11 09:03:36




## Redux简介

Redux是一个流行的前端状态管理库，用于集中管理应用程序的数据状态。它可以帮助您轻松地管理应用程序的状态，并在应用程序的不同组件之间共享数据，从而提高应用程序的开发效率和可维护性。

## 搭建Redux

### 1. 创建Redux项目

在终端中，使用npm或yarn初始化一个新的React项目。

npx create-react-app redux-project


### 2. 安装Redux

在项目中安装Redux和React-Redux库。

npm install redux react-redux


### 3. 创建Store

创建一个Redux store，用于保存应用程序的状态。在src文件夹下创建store.js文件，并添加以下代码：

```javascript
import { createStore } from 'redux';

// 创建一个简单的reducer
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 创建一个store
const store = createStore(reducer, { count: 0 });

export default store;

4. 将Store连接到应用程序

在src文件夹下创建index.js文件，并添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

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

5. 使用Redux

现在您可以在组件中使用Redux。在src文件夹下创建App.js文件，并添加以下代码：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default App;