Redux是一个状态管理库，广泛用于JavaScript应用程序，特别是React。它为应用的状态提供了一个集中存储，使其更易于管理和调试，特别是在大型和复杂的应用中。Redux遵循单向数据流，并确保状态更改以可预测的方式发生，从而更容易理解应用的工作方式。
让我们一步一步地分解Redux的基础知识，用代码示例解释每个概念。
什么是Redux？
Redux是JavaScript应用程序的可预测状态容器。它可以帮助您以集中的方式管理应用的状态，使其更容易调试和扩展。
Redux的核心原则：
- 单一来源：应用程序的整个状态存储在一个对象（store）中，使其易于跟踪和操作。
- 状态是只读的：更改状态的唯一方法是通过分派操作。
- 用纯函数进行更改：状态由reducers修改，是指定状态如何响应操作的纯函数。
Redux的核心概念
Redux依赖于以下关键组件：
Action
Action是一个普通的JavaScript对象，它描述了应用程序中发生的事件或操作。每个操作都必须有一个type属性，用于描述正在执行的操作。
示例：
// actions.js
export const increment = () => ({
type: 'INCREMENT'
});
export const decrement = () => ({
type: 'DECREMENT'
});
这里，increment和decrement是动作创建者。它们返回带有type字段的操作对象。type属性告诉Redux如何在reducer中处理action。
Reducer
reducer是一个纯函数，它接受当前状态和一个动作，然后返回一个新的状态。Reducer指定状态应如何响应操作。它们是纯函数，这意味着它们不修改原始状态，而是返回一个新的状态对象。
示例：
// reducer.js
const initialState = {
count: 0
};
const counterReducer = (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;
}
};
export default counterReducer;
Store
Store保存应用程序的整个状态。store使用Redux中的createStore方法创建。store还提供了分派操作和订阅状态更改的方法。
示例：
// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';
const store = createStore(counterReducer);
export default store;
- 通过将counterReducer传递给
createStore来创建存储区。 - 现在，应用程序的状态由Redux管理。对状态的任何更改都将通过reducer。
将Redux与React连接起来
React组件需要与Redux交互来获取状态和调度操作。React-Redux是一个独立的库。它提供了useSelector来访问存储的状态，并使用useDispatch来分派操作。
Redux与React连接的步骤：
- 使用
Provider组件，以将store传递给您的所有组件。 - 使用
useSelector访问状态。 - 使用
useDispatch分派修改的操作。
在React App中设置Redux
步骤1：安装Redux和React-Redux
首先，你需要安装Redux和React-Redux：
npm install redux react-redux
步骤2：创建操作
// actions.js
export const increment = () => ({
type: 'INCREMENT'
});
export const decrement = () => ({
type: 'DECREMENT'
});
步骤3：创建Reducer
reducer，它接受当前状态和一个动作，并返回一个新状态。
// reducer.js
const initialState = {
count: 0
};
const counterReducer = (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;
}
};
export default counterReducer;
步骤4：创建store
// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';
const store = createStore(counterReducer);
export default store;
步骤5：连接Redux和React
现在，让我们使用Provider、useDispatch和useRedux钩子将Redux连接到我们的React应用。
// App.js
import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import store from './store';
import { increment, decrement } from './actions';
const Counter = () => {
const count = useSelector((state) => state.count); // Get count from the store
const dispatch = useDispatch(); // Get dispatch function to send actions
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
const App = () => {
return (
<Provider store={store}> {/* Provide the Redux store to the app */}
<Counter />
</Provider>
);
};
export default App;
5. Redux工具包（可选）
为了使Redux更易于使用，Redux Toolkit简化了配置。它提供了一些实用功能，如createSlice和configureStore。
使用Redux Toolkit的示例：
import { configureStore, createSlice } from '@reduxjs/toolkit';
// Define a slice of state
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => {
state.count += 1;
},
decrement: (state) => {
state.count -= 1;
}
}
});
// Configure store
const store = configureStore({
reducer: counterSlice.reducer
});
export default store;
