第三方库react-redux基础使用容器UI组件使用数据管理优化

news2024/10/6 0:29:37

其实redux并不是React特有的技术 redux是一家独立公司做出来适配与目前几大前端主流框架的状态管理工具。
其实最初 redux也希望码友们用它来管理vue的状态数据

但后面 React官方发现很多人喜欢在React项目中使用redux 于是 React公司专门做了react-redux这个第三方的库帮助我们做状态管理

那么现在我们就来写一个这样的项目

首先打开一个react项目

然后先引入redux

npm install redux --save

react-redux只是方便你在项目中更好的管理redux 但他并不能取代redux 还是要引入的

然后我们引入react-redux

npm install react-redux --save

然后我们 react-redux 就进来了

然后我们在src目录下创建redux文件夹他主要就做我们几个状态管理估计的容器

redux文件夹下创建一个store.js 参考代码如下

import { createStore,applyMiddleware } from "redux"
import reducer from "../redux/counter"
import thunk from "redux-thunk"

// 创建store仓库
const store = createStore(reducer,applyMiddleware(thunk));

export default store

然后在redux下创建counter.js 参考代码如下

let stateMap = {
   name: "小猫猫",
   money: 2800
}
const counter = ( state = stateMap,action )  => {
    switch(action.type) {
        case"PriceRise":
            state.money = (state.money + action.value);
            return state
        case"DevaLuation":
            state.money = (state.money - action.value);
            return state
        default:
        return state;
    }
}
export default counter

这里我们定义了stateMap来做redux的state 也就是数据来源

然后我们定义了两种处理 PriceRise 加的处理 DevaLuation减的处理

redux下创建 action.js 参考代码如下

export function PriceRise(value,callback) {
    return (dispatch) => {
        setTimeout(
            ()=>{
                dispatch({
                    type: "PriceRise",
                    value: value
                });
                callback()
            },500
        )
    }
}
export function DevaLuation(value) {
    return {
        type: "DevaLuation",
        value: value
    }
}

action.js中定义的函数主要就是帮助调用counter中的函数

这些之前也都提到过

然后在 src下创建containers文件夹 containers主要用来存放容器组件容器组件就会通过react-redux来管理我们的ui组件

在containers中创建组件taximeter.jsx这个主要就是我们的第一个容器组件参考代码如下

import Taximeter from '../components/taximeter';
import {connect} from 'react-redux';
import {PriceRise,DevaLuation} from "../redux/action";

function getStore(store) {
    return {store: store}
}

function setData(dispatch){
    return {
        PriceRise: (value,callback)=> {
            dispatch(PriceRise(value,callback))
        },
        DevaLuation: (value)=> {
            dispatch(DevaLuation(value))
        }
    }
}

export default connect(getStore,setData)(Taximeter)

这里我们组件就暴露出了store的对象然后通过setData定义了调用redux PriceRise和DevaLuation的方法

然后我们容器组件关联了ui组件我们来编写这个ui组件

在src下创建 components文件夹 components 就是用来存实体 ui组件的下面创建taximeter.jsx 参考代码如下

import React from "react";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  
  onPriceRise = () =>{
    this.props.PriceRise(10,() =>{
      this.setState({})
    });
  }
  onDevaLuation = () =>{
    this.props.DevaLuation(10);
    this.setState({})
  }

  render(){
    return (
      <div className="App">
        <button onClick={ this.onPriceRise }>涨价十个点</button>
        <button onClick={ this.onDevaLuation }>降价十个点</button>
        <div>{ this.props.store.money }</div>
      </div>
    )
  }
}

export default App;

这里我们完全的复合了react-redux的原则 ui组件没有用一行store的代码也没有引入store 数据都是调的父级传的方法也是

然后我们在 src下的 App.js 组件中去使用他的容器组件

import './App.css';
import Taximeter from './containers/taximeter';
import store from "./redux/store";

function App() {
  return (
    <div className="App">
        <Taximeter store = {store}/>
    </div>
  );
}

export default App;