如何使用react-redux对我们数据进行管理。

首先使用create-react-app创建react项目

第一步：如果你想创建的项目在桌面的话，我们首先执行第一个命令win+r 输入cmd命令

第二步：进入我们的命令式窗口，然后输入命令cd desktop，这就进入我们的桌面了，然后我们输入命令create-react-app 文件名字  这里我们使用test。然后稍等片刻我们就可以进行安装了。

 

在安装的时候我们来看看我们具体要实现什么样的功能

第二步创建count组件

第一步：我们进入到我们的项目工程，删除无关的代码，我们在src文件夹下面新建一个文件夹叫count文件夹，然后在里面新建一个index.js文件。

import React from 'react';

const count = () => {
  return (
    <div>   
      <select name="" id="">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
      <button >+</button>
      <button >-</button>
      <button >异步减</button>
      <h3>当前的数为：??????</h3>
    </div>
  );
}

export default count;

第三步安装react-redux

第一步：我们新建终端，这里我们采用npm方式安装当然也可以采用yarn的方式进入安装

第二步：我们输入npm install  react-redux

 如何判断我们安装成功没有了呢？我们可以进入package.json这个文件里面记录了我们项目的所有依耐。我们可以在这里发现我们react-redux安装成功啦。

第四步看原理图

一切准备就绪，我们现在先去看一看react-redux的原理图，更加方便我们编码

 第五步编码阶段

第一步：根据原理图我们得知我们需要新建一个store文件并且有actionCreator reducer等成员在src下新建一个文件夹store

 第二步：首先我们要创建我们的最最最重要的store这个桥梁

import { createStore,applyMiddleware } from "redux";    //引入creatstore创建store，applyMiddleware中间键进行我们的异步操作
import countreducer from './reducer' //引入我们的countreducer
import thunk from 'redux-thunk' //解决我们不能进行异步操作的困难就需要请出redux-thunk当然我们也有其他的方法比如redux-saga
import { combineReducers } from "redux";//合并我们的reducer，因为我们不可能只有一个reducer
const allreducer = combineReducers({//对我们的reducer进行合并
  count: countreducer,
})


export default createStore(allreducer,applyMiddleware(thunk))//暴露我们store

第三步：创建我们的actioncreator，动作对象。

// 这个就是向外暴露一个函数，该函数返回对象
//返回的如果是一个函数就需要引入我们的redux-thunk

export function addaction (data) {
  return {
    type: 'add',//就是我们在与reducer中就行switchcase进行对比，一定要与reducer一样
    data:data//你所携带的参数
  }
}
export function jianaction (data) {
  return {
    type: 'jian',
    data:data
 } 
}
export function asnycjianaction (data,time) {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(jianaction(data))
    },time)
  }
}

第四步：我们创建reducer

// 必须是个纯函数 
const initState=0
export default function countreducer (preState=initState,action) {
  const { type,data } = action
  switch (type) {
    case 'add':
      return preState + data
    case 'jian':
      return preState - data
    default:
      return preState
  }
}

第五步：开始跟react-redux进行通讯

import React, { useRef,} from 'react';
import { connect } from 'react-redux'
import  {addaction,jianaction,asnycjianaction }    from '../store/actionCreator'
const Count = (props) => {
  const selectref = useRef()
  // useref得到当前dom元素并且对其进行操作
 const   add = () => {
    const value =selectref.current.value
   props.addaction(value * 1)
   console.log(selectref.current.value)
  }
 
 const jian = () => {
    const value =selectref.current.value
  props.jian(value*1)
  }
  const asnycjian = () => {
    const  value  =selectref.current
   props.asnycjian(value*1,2000)
  }

  return (
    <div>
    <select name="" id="" ref={selectref} >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
      <button onClick={add}>+</button>
      <button onClick={jian}>-</button>
      <button onClick={asnycjian}>异步减</button>
      <h3>当前的数为：{props.count}</h3>
      </div>
      )
}

function mapStateToProps (state) {
  return {
    count: state.count
  }
}
function mapDispatchToProps (dispatch) {
  return {
    addaction: number => {dispatch(addaction(number))},
    jian:number=>{dispatch(jianaction(number))},
    asnycjian:(number,time)=>{dispatch(asnycjianaction(number,time))}
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Count)

第六步：将我们的store给所有组件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
    <App />
  </Provider>
  // 因为我们很多的组件都需要store，于是我们将这个通过provider传给所有组件
);