React 中使用 Redux 的 4 种写法小结

React 中使用 Redux 的 4 种写法小结指的是在 React 中集成 Redux 的四种不同的方法。这四种方法分别是：

React 中使用 Redux 的 4 种写法小结指的是在 React 中集成 Redux 的四种不同的方法。这四种方法分别是：

1.传统的用法（Traditional Way）

2.React-Redux 库的用法（Using React-Redux Library）

3.Redux Hooks 的用法（Using Redux Hooks）

4.Redux Toolkit 的用法（Using Redux Toolkit）

下面我将对这四种方法进行详细的讲解。

1.传统的用法

传统的用法是使用 Redux 的基本方式，需要手动编写 action creator、reducer、store 等逻辑代码，然后在 React 中进行引用和使用。下面是一个简单的示例：

首先，我们需要编写 reducer 和 action creator。

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export function increment() {
  return { type: INCREMENT };
}

export function decrement() {
  return { type: DECREMENT };
}

// reducer.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0,
};

export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

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

const store = createStore(counterReducer);
export default store;

接着，在 React 中引入 store，并使用 connect 方法将 store 传递给组件。

// App.js
import React from 'react';
import { Provider, connect } from 'react-redux';
import store from './store';
import { increment, decrement } from './actions';

const Counter = (props) => (
  <div>
    <h1>Count: {props.count}</h1>
    <button onClick={props.increment}>+</button>
    <button onClick={props.decrement}>-</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = {
  increment,
  decrement,
};

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

function App() {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
}

export default App;

2.Using React-Redux Library

React-Redux 库提供了一些便于使用 Redux 的组件和 API。在使用 React-Redux 库时，我们只需要编写 reducer 和 action creator，然后使用 Provider 组件将 store 传递给整个应用程序。下面是示例代码：

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export function increment() {
  return { type: INCREMENT };
}

export function decrement() {
  return { type: DECREMENT };
}

// reducer.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0,
};

export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducer';
import App from './App';

const store = createStore(counterReducer);

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

接着，我们可以在 React 组件中使用 useSelector 和 useDispatch 这两个 API 进行状态管理和事件分发：

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

  const handleIncrement = () => dispatch(increment());
  const handleDecrement = () => dispatch(decrement());

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default App;

3.Using Redux Hooks

Redux Hooks 是 React-Redux 库中提供的一组 React hooks。使用 React Hooks，我们可以更加方便地使用 Redux。

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

4.Using Redux Toolkit

Redux Toolkit 是一个用于简化 Redux 的工具集。在使用 Redux Toolkit 时，我们只需要编写 reducer 和 action creator，然后使用 createSlice 方法生成 reducer 和 action creator 的代码。

// slice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
  },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

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

export default counterSlice.reducer;

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './slice';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

以上就是 React 中使用 Redux 的 4 种写法小结的攻略，希望能对你有所帮助。