首先,我们需要安装 Redux 及其相关依赖:
npm install redux react-redux
redux是 Redux 库的核心部分,提供了创建 Store、Reducer、Action 等功能。react-redux是 React 和 Redux 的集成库,用于在 React 组件中使用 Redux。
安装完成后,我们开始创建 Redux 应用程序:
- 创建 Redux Store:
// store.js
import { createStore } from 'redux';
// Reducer 函数
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// 创建 Store
export const store = createStore(counterReducer);
- 在 React 组件中使用 Redux:
// CounterComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
function CounterComponent() {
// 从 Store 中获取状态
const count = useSelector(state => state);
// 获取 dispatch 函数
const dispatch = useDispatch();
// 触发 Action
const handleIncrement = () => {
dispatch({ type: 'INCREMENT' });
};
const handleDecrement = () => {
dispatch({ type: 'DECREMENT' });
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
export default CounterComponent;
- 在 React 应用程序中使用 Redux Store:
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import CounterComponent from './CounterComponent';
function App() {
return (
<Provider store={store}>
<CounterComponent />
</Provider>
);
}
export default App;
在这个例子中,我们首先创建了 Redux Store,并定义了 Reducer 函数。然后在 React 组件中使用 useSelector 和 useDispatch hooks 来分别获取 Store 状态和 dispatch 函数。最后,我们在顶层应用程序中使用 Provider 组件包裹整个应用程序,并传入 Store 实例,这样子组件就可以访问 Redux Store 了。
