下载依赖
npm i @reduxjs/toolkit
npm i react-redux
创建store和切片
切片
import { createSlice } from '@reduxjs/toolkit'
const carlistSlice = createSlice({
name: 'posts',
initialState:{
list:[
{
title:"123",
price:40,
fen:1,
}
],
shopcar:[]
},
reducers: {
addobj(state,{ payload }){
state.shopcar.push(payload)
}
}
})
export const { addobj } = carlistSlice.actions
export default carlistSlice.reducer
创建store
import { configureStore } from '@reduxjs/toolkit'
import carlistSlice from './carlistSlice/carlistSlice'
const store = configureStore({
reducer: {
carlist: carlistSlice
}
})
export default store
配置根路径
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom'
import router from './router';
import { Provider } from 'react-redux';
import store from './state';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
</React.StrictMode>
);
组件内部使用
import React, { useState,useEffect } from 'react';
import { connect } from 'react-redux'
import './app.scss'
import { addobj } from './state/carlistSlice/carlistSlice'
import store from './state/index'
import { useNavigate } from 'react-router-dom'
const App = state => {
const navigate = useNavigate()
const [list, setlist] = useState([]);
useEffect(() => {
setlist([...state.carlist])
}, []);
const gailiang = idx =>{
setliangnum(idx)
if(idx !== 0){
console.log(idx);
let copylist = [...state.carlist]
let newlist = copylist.filter(item =>{
return item.fen === idx
})
setlist([...newlist])
}else{
setlist([...state.carlist])
}
}
const additem = ite =>{
store.dispatch(addobj({...ite,num:1,checked:false}))
}
return (
<div id='app'>
<div style={{ height: "50px" }}></div>
{
list.map((item, index) => (
<div className='app-body' key={index}>
<div className='app-body-one'>
<img style={{ width: "120px" }} alt='123' src='/logo192.png' />
<div>
<div>{item.title}</div>
<div>{item.price}</div>
</div>
</div>
<button onClick={()=>additem(item)}>+</button>
</div>
))
}
<button onClick={()=>navigate('/shopcar')}>去购物车</button>
</div>
);
}
const aaa = state => {
return {
carlist: state.carlist.list
}
}
const bbb = state => {
return {}
}
export default connect(aaa, bbb)(App);