React中使用Redux、React-redux

上一章配置完React 中v6路由的抽离使用，那么在项目开发中需要统一管理数据，vue中使用的是vuex，而React 中使用的是 Redux(并不是react官方提供的库),react-redux，下面就将路由，redux,react-redux 来结合起来使用。

在项目下创建store文件夹：

安装redux,react-redux

npm i react-redux 

npm i redux

一：创建 user.js 文件， 定义初始数据

const init = {
    todo: [

    ]
}

const user = (state = init.todo, action) => {
    switch (action.type) {
        case "show": //展示
            return state
        case "insert":  //添加
            return [...state, action.data]
        default:
            return state
    }
}

export default user

二：createStore.js 生成一个唯一的store函数

import { combineReducers,createStore } from "redux"

import user from "./user"  // 引入定义好的初始数据

const Reduser = combineReducers({ //提供合并多个reducer的函数，保证store的唯─性
    user
})

const store = createStore(Reduser)  // createStore生成store 

export default store  //导出store

三：创建reducers.js

import App from "../App"
import { connect } from "react-redux"
//connect: 将store和组件联系到一起，但是它并不会改变它连接的connect组价，而是提供一个
//经过包裹的connect组件( 就是connect包裹的组件就可以通过props来获取store数据)


//读取数据，通过props接受
const mapState = (state)=>{
    console.log(state)
    return {
       //用state接受state数据
        state:state.user
    }
}
// 可以通过触发yibu这个函数然后在调用dispatch进行触发，也可以在页面直接使用 
//props.dispatch()来进行触发
const mapReduser = (dispatch)=>{
    return {
        yibu:()=>{
            dispatch({type:"show"})
        }
    }
}


export default connect(
    mapState,
    mapReduser
)(App)

四：配置根文件

redux和组件进行对接的时候是直接在组件中进行创建。react-redux是运用Provider将组件和store对接，使在Provider里的所有组件都能共享store里的数据，还要使用connect将组件和react连接。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import App from "./store/reducers"  //渲染reducers 因为已经使用connenct包裹
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom"
import { Provider } from "react-redux"
import store from "./store/createStore"   //引入store数据


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>   //使用Provider,使所有组件共享状态
    <BrowserRouter> 
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </BrowserRouter>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

这时候在App页面打印props,

这时候store定义的数据就传过来了，因为我没写数据，所以数组为0，这时候就可以store来统一对数据的管理

在函数组件中我们可以使用以下方法进行获取redux数据和dispatch方法：

import { useSelector, useDispatch } from "react-redux" //在react-redux中引入

export default function About() {
      const store = useSelector(store => store) //获取store
      const dispatch = useDispatch() //dispatch方法
    render(<></>)
}