Redux Toolkit 实战使用指南

npm i react-redux @reduxjs/toolkit

// user.js

import { createSlice } from '@reduxjs/toolkit'

const userSlice = createSlice({

name: 'user-slice',

initialState: {

name: '张三',

age: 18,

gender: '男'

},

reducers: {

setName(state, action) {

state.name = action.payload

},

setGender(state, action) {

state.gender = action.payload

},

setAge(state, action) {

state.age = action.payload

}

}

})


export default userSlice

// goods.js
import { createSlice } from '@reduxjs/toolkit'
const goodsSlice = createSlice({
name: 'goods-slice',
initialState: {
name: '苹果',
price: 100
},
reducers: {
setName(state, action) {
state.name = action.payload
},
setPrice(state, action) {
state.price = action.payload
}
}
})
export const { setName, setPrice } = goodsSlice.actions
// 异步action
export const setPriceAsync = () => async (dispatch,getState) => {
setTimeout(() => {
dispatch(setPrice(200))
},2000)
}
export default goodsSlice

// index.js
import { configureStore } from '@reduxjs/toolkit'
import userSlice from './user'
import goodsSlice from './goods'
const store = configureStore({
reducer: {
user: userSlice.reducer,
goods: goodsSlice.reducer
}
})
export default store

// main.js
import store from './stores/index'
ReactDom.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
)

// Child.jsx
import { useSelector, useDispatch } from 'react-redux'
import { setName, setPrice } from '../stores/goods'
const Child = () => {
const user = useSelector(state => state.user)
const goods = useSelector(state => state.goods)
const dispatch = useDispatch()
return (
<div>
<h1>子组件</h1>
<h2>用户：{user.age}</h2>
<h2>商品：{goods.name}</h2>
<button onClick={() => dispatch(setPrice(100))}>修改价格</button>
</div>
)
}
export default Child

function App() {
return (
<div className="App">
<h1>App</h1>
<Child />
</div>
)
}
export default App