下載依賴

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);