# 19 在React里使用Redux，向action里传参

好的，我将为您提供一个从头开始创建项目并使用Redux的示例。我们将使用Redux Toolkit、React、和React-Redux。在这个示例中，我会展示如何设置项目结构、创建Redux store、编写actions、reducers和组件，并将它们连接起来。

首先，确保您已经安装了Node.js和npm。然后，我们将创建一个React应用，并使用Redux Toolkit添加Redux支持。

创建项目

首先，使用Create React App创建一个React应用：

npx create-react-app redux-example
cd redux-example

进入项目目录后，我们需要安装Redux Toolkit、React-Redux和Redux DevTools扩展：

npm install @reduxjs/toolkit react-redux

目录结构

在项目中，我们将按照以下结构组织文件：

redux-example/
  |- src/
      |- components/
          |- Counter.js
      |- features/
          |- counter/
              |- counterSlice.js
              |- counterActions.js
      |- App.js
      |- index.js

编写Redux相关代码

counterSlice.js

这个文件将包含我们的reducer和actions，Redux Toolkit的Slice概念将它们合并在一起。

import { createSlice } from '@reduxjs/toolkit';

// 初始化状态
const initialState = {
  value: 0
};

// 创建一个Slice
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++;
    },
    decrement(state) {
      state.value--;
    },
    incrementByAmount(state, action) {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

counterActions.js

这个文件可以用来编写和导出纯粹的action creators，如果你更喜欢不同的文件组织方式。

import { increment, decrement, incrementByAmount } from './counterSlice';

export const increase = () => increment();
export const decrease = () => decrement();
export const increaseBy = (amount) => incrementByAmount(amount);

编写React组件

Counter.js

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increase, decrease, increaseBy } from '../features/counter/counterActions';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increase())}>Increase</button>
      <button onClick={() => dispatch(decrease())}>Decrease</button>
      <button onClick={() => dispatch(increaseBy(5))}>Increase by 5</button>
    </div>
  );
};

export default Counter;

连接Redux到应用

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';
import App from './App';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

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

App.js

import React from 'react';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter />
      </header>
    </div>
  );
}

export default App;

运行应用

现在您可以运行项目：

npm start

这将启动一个开发服务器，并在浏览器中打开React应用。您将看到一个计数器，可以通过按钮增加或减少计数值。

这个示例涵盖了Redux的基本用法，包括如何设置项目、创建Redux store、编写reducers、actions和组件，以及如何将它们连接起来。希望这对您有所帮助！