分解优化react对redux的基础使用

news2024/12/23 14:57:48

之前写了
react18 通过redux 做一个简单的状态管理基站
但代码确实相对比较乱
这次进行一些小封装和分解优化一下管理质量
首先我们创建一个 react项目
然后在项目中引入

npm install redux --save

在src目录下创建 reducers 文件夹下面创建 counter.js

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 然后主要操作的是他的money金额字段 action 会从外面传入其中有两个字段一个是 type 告诉counter 要进行什么操作

action.value 用于控制state下money(金额) 的值

PriceRise 则我们加上去
DevaLuation 则减掉

然后在 src下创建action文件夹
action下创建index.js 参考代码如下

export function PriceRise(value) {
    return {
        type: "PriceRise",
        value: value
    }
}
export function DevaLuation(value) {
    return {
        type: "DevaLuation",
        value: value
    }
}

这里的方法就负责产生调用counter的数据

他们都有自己的type 然后value是外面传入的

src下创建目录 store 下面再创建一个index.js

参考代码如下

import { createStore } from "redux"
import reducer from "../reducers/counter"

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

export default store

这里负责用counter调用redux中的createStore生成对象然后导出

然后在src下创建目录components 在下面建一个组件 taximeter.jsx 参考代码如下

import React from "react";
import store from "../store/index";
import {PriceRise,DevaLuation} from "../action/index";

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

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

export default App;

这里我们定义了所有的逻辑代码然后我们将他在 App.js 根组件中使用

import './App.css';
import Taximeter from './components/taximeter';

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

export default App;