Redux 是一个 JavaScript 应用程序状态管理库，它可以帮助我们更好地管理应用程序的状态。Redux 是一个非常流行的库，被广泛应用于 React 应用程序中。在本篇文章中，我们将深入浅出地介绍 Redux，让你能够在 30 分钟内学会 Redux 的使用。
Redux 是什么？
Redux 是一个状态管理库，它可以帮助我们更好地管理应用程序的状态。Redux 通过一个单一的状态树来管理我们的应用程序状态，这个状态树可以被任何组件访问，从而使我们的应用程序状态更加可预测。
Redux 的三个核心概念是：
- Store：存储应用程序的状态。
- Action：描述应用程序中发生的事情。
- Reducer：根据 Action 更新 Store 中的状态。
Redux 的基本用法
我们来看一下 Redux 的基本用法。首先，我们需要安装 Redux：
npm install redux
然后，我们需要创建一个 Store。Store 是 Redux 中最重要的概念之一，它存储了我们应用程序的状态：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
const initialState = {
count: 0,
};
function 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);在上面的代码中，我们创建了一个 Store，并定义了一个初始状态 initialState。然后，我们定义了一个 reducer 函数，这个函数接收一个 state 和一个 action。reducer 函数根据 action 的类型来更新 state，并返回一个新的 state。
我们可以使用 store.getState() 方法来获取当前的状态：
console.log(store.getState()); // { count: 0 }我们可以使用 store.dispatch() 方法来派发一个 action：
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }
store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // { count: 0 }在上面的代码中，我们分别派发了 INCREMENT 和 DECREMENT 两个 action，这两个 action 分别对应着加一和减一的操作。每次派发 action 后，我们都可以通过 store.getState() 方法来获取当前的状态。
Redux 的高级用法
Redux 的高级用法包括异步操作、中间件、组合 reducer 等。这里我们简单介绍一下这些概念。
异步操作
Redux 默认只能处理同步操作，但是我们的应用程序中可能会有很多异步操作，例如发送请求、处理定时器等。为了处理这些异步操作，我们需要使用 Redux Thunk 中间件。
npm install redux-thunk
// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const initialState = {
isLoading: false,
data: null,
error: null,
};
function reducer(state = initialState, action) {
switch (action.type) {
case 'FETCH_START':
return { ...state, isLoading: true };
case 'FETCH_SUCCESS':
return { ...state, isLoading: false, data: action.payload };
case 'FETCH_ERROR':
return { ...state, isLoading: false, error: action.payload };
default:
return state;
}
}
function fetch() {
return dispatch => {
dispatch({ type: 'FETCH_START' });
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => {
dispatch({ type: 'FETCH_SUCCESS', payload: json });
})
.catch(error => {
dispatch({ type: 'FETCH_ERROR', payload: error });
});
};
}
const store = createStore(reducer, applyMiddleware(thunk));
store.dispatch(fetch());在上面的代码中，我们定义了一个 fetch 函数，这个函数返回一个函数。这个函数接收一个 dispatch 函数作为参数，我们在这个函数中可以执行异步操作，并在异步操作完成后派发对应的 action。
我们使用 applyMiddleware() 方法来引入 Redux Thunk 中间件。
中间件
中间件是 Redux 的一个重要概念，它可以让我们在派发 action 和更新 state 之间添加自定义的逻辑。中间件可以用于日志记录、异步操作、错误处理等。
// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
const initialState = {
count: 0,
};
function 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;
}
}
function logger({ getState }) {
return next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', getState());
return result;
};
}
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });在上面的代码中，我们定义了一个 logger 中间件，这个中间件会在派发 action 和更新 state 之间添加自定义的逻辑。我们使用 applyMiddleware() 方法来引入 logger 中间件。
组合 reducer
当我们的应用程序变得越来越复杂，我们可能需要将 reducer 拆分成多个小的 reducer，然后再将它们组合起来。Redux 提供了一个 combineReducers() 方法来实现这个功能。
// javascriptcn.com 代码示例
import { createStore, combineReducers } from 'redux';
const initialState = {
count: 0,
message: '',
};
function countReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
function messageReducer(state = '', action) {
switch (action.type) {
case 'SET_MESSAGE':
return action.payload;
default:
return state;
}
}
const reducer = combineReducers({
count: countReducer,
message: messageReducer,
});
const store = createStore(reducer);
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'SET_MESSAGE', payload: 'Hello World' });
console.log(store.getState()); // { count: 1, message: 'Hello World' }在上面的代码中，我们将 reducer 拆分成了 countReducer 和 messageReducer 两个小的 reducer，并使用 combineReducers() 方法将它们组合起来。
总结
在本文中，我们介绍了 Redux 的基本概念和用法，包括 Store、Action 和 Reducer。我们还介绍了 Redux 的高级概念，包括异步操作、中间件和组合 reducer。
Redux 是一个非常强大的状态管理库，它可以帮助我们更好地管理应用程序的状态。如果你正在开发一个大型的 React 应用程序，那么 Redux 绝对是一个不可或缺的工具。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a8d7395b1f8cacd4e640c