一.经典版
1. 安装Redux和React Redux
npm install redux react-redux2. 创建action
// actions/counterActions.js
export const increment = () => {
return {
type: 'INCREMENT'
};
};
export const decrement = () => {
return {
type: 'DECREMENT'
};
};
export const add = (amount) => ({
type: 'ADD',
payload: amount,
});
3. 创建reduce
// reducers/counterReducer.js
const counterReducer = (state = 0, action: any) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
case "ADD":
return state + 5;
default:
return state;
}
};
export default counterReducer;
4. 在项目的src目录中创建store.js
// store.js
import { legacy_createStore as createStore, combineReducers, applyMiddleware, compose } from 'redux';
// 引入 reducer
import counterReducer from './reducer';
// 使用 combineReducers 组合多个 reducer
const rootReducer = combineReducers({
counter: counterReducer,
// 这里可以添加更多的 reducer
});
// 为 Redux DevTools 扩展设置
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// 创建 Redux store，添加中间件支持，同时启用 Redux DevTools
const store = createStore(
rootReducer,
/* preloadedState, */
composeEnhancers(applyMiddleware(
// 这里是将来可能添加的中间件
))
);
export default store;
5. 在React组件中使用
a. 首先，在应用的最顶层组件（App.js）中使用<Provider>组件包裹你的应用，将store传递给它
// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import MyComponent from './MyComponent';
function App() {
return (
<Provider store={store}>
<div className="App">
<MyComponent />
</div>
</Provider>
);
}
export default App;
b. 然后，在需要访问Redux store的组件中使用useSelector来读取状态，使用useDispatch来分发action
// Counter.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement,add } from '../store/action';
const Counter = () => {
const count = useSelector((state:any) => state.counter);
const dispatch = useDispatch();
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(add(5))}>Add 5</button>
</div>
);
};
export default Counter;
二、旧版
这种方法在react-redux版本5及之前非常流行，随着react-redux版本6和7的发布，这种方法已经被淘汰了。但是企业中仍有很多旧项目保持着这种写法，所以学会这项技术的使用也是必须的。
1.安装
npm install redux react-redux2Action
// src/actions/index.js
export const increment = () => {
return {
type: 'INCREMENT',
};
};
export const decrement = () => {
return {
type: 'DECREMENT',
};
};
3.创建Reducer
// src/reducers/counterReducer.js
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
export default counterReducer;
4.创建Store
// src/store.js
import { createStore, combineReducers } from 'redux';
import counterReducer from './reducers/counterReducer';
const rootReducer = combineReducers({
counter: counterReducer,
});
const store = createStore(rootReducer);
export default store;
5.组件中使用
a. 使用 Provider from react-redux 把 Redux store 提供给 React 应用
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
b. 然后，在需要访问Redux store的组件中使用
// src/App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';
// 定义并导出函数式组件
const App = (props) => {
return (
<div>
<h2>Counter: {props.count}</h2>
<button onClick={props.increment}>+</button>
<button onClick={props.decrement}>-</button>
</div>
);
};
// mapStateToProps remains unchanged
const mapStateToProps = (state) => {
return {
count: state.counter.count,
};
};
// mapDispatchToProps remains unchanged as well
const mapDispatchToProps = {
increment,
decrement,
};
// 在组件中使用 connect() 去连接 Redux store
export default connect(mapStateToProps, mapDispatchToProps)(App);
三、最新版
@reduxjs/toolkit 是 Redux 团队推荐的方式来编写 Redux 逻辑的工具集。它旨在提供更简便的 API，帮助开发者解决 Redux 应用中经常遇到的一些常见问题，如配置 store、添加中间件、编写 reducer 逻辑等。Redux Toolkit 引入了几个核心概念，如“切片（slices）”来简化 reducer 和 action creators 的编写，以及创建异步逻辑的“createAsyncThunk”等工具。
1.安装
npm install @reduxjs/toolkit react-redux2.使用 createSlice 创建一个包含了 reducer 函数和 actions 的切片（slice）
// slices/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
add: (state,pa) => {
state.value += pa.payload;
},
},
});
export const { increment, decrement,add } = counterSlice.actions;
export default counterSlice.reducer;
3.通过 Redux Toolkit 的 configureStore 来创建和配置 store
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slices/counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});
4.组件中使用
a. 首先，在应用的最顶层组件（App.js）中使用<Provider>组件包裹你的应用，将store传递给它
// index.js 或 App.js，根据你的项目结构来决定
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App'; // 这是你的应用组件
import { store } from './store'; // 确保从 store.js 正确导入 store
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
b. 然后，在需要访问Redux store的组件中使用useSelector来读取状态，使用useDispatch来分发action
// Counter.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, add } from '../store/reducer';
const Counter = () => {
const count = useSelector((state: any) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(add(9))}>Decrement</button>
</div>
);
};
export default Counter;
