React中react-redux的基本使用

import {createStore} from "redux" //引入 createStore
const rendues=(state,actions)=>{
    if(!state){//初始数据
        return{
            num:1
        }
    }
    const {type,payload}=actions
    switch(type){      //定义方法
        case "Add-num":
            let nums=state.num
            nums+=1
            state.num=nums
            console.log('state', state)
            return {...state}
            break;
        default:
            return state
            break;
    }
}
const score=createStore(rendues)
export default score

import React, { Suspense } from "react"
import './App.css';
import { Provider } from "react-redux"
import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom"
import Errcon from './errcon';
import Loading from "./Loading";
import score from "./store/one1/index";
const Main = React.lazy(() => import("./views/one1/main"))
function App() {
  // const Navigate = useNavigate()
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <Provider store={score}>
          <BrowserRouter>
            <Routes>
              <Route path='/' element={<Main />}></Route>
              <Route path='/err' element={<Errcon />}></Route>
              {/* <Route path="*" element={<Navigate to="/err" replace={true}/>} />   */}
            </Routes>
          </BrowserRouter>
        </Provider>
      </Suspense>
    </div>
  );
}
export default App;

import React, { useState } from 'react'
import "../css/main.css"
import { connect } from "react-redux"
function Main(props) {
    const con=props.count
    console.log('con', con)
    console.log('props', props)
    const addnum = () => {
        props.add();
        console.log('conss', props.count);
      };
    return (
        <div className='main'>
            <h2>main</h2>
            <p>{con.num}</p>
            <button onClick={addnum}>添加</button>-
            <button>减少</button>
        </div>
    )
}
const mapStateToProps  = (state) => {
    return {
        count: state
    }
}
const mapDispatchToProps  = (dispatch ) => {
    return {
        add: () =>dispatch ({ type: "Add-num" })
    }
}
export default connect(mapStateToProps , mapDispatchToProps )(Main)