react18 通过redux 做一个简单的状态管理基站

news2025/4/8 21:08:41

我们打开react项目在终端输入

npm install redux --save

在这里插入图片描述 redux就进来了

这里我们引入了 redux 但其实有一个 redux 和一个 react-redux

两者区别在于 redux 是一个js的状态管理容器而react-redux 则提供了更多便于react开发的状态管理方法

然后我们在项目的src目录下创建一个 reducers文件夹
然后下面创建一个counter.js
参考代码如下

const counter = ( state = 0,action )  => {
    switch(action.type) {
        case"INCREMENT":
            return state + 1;
        case"DECREMENT":
           return state - 1;
        default:
        return state;
    }
}
export default counter

然后在 src中的index.js 下引入这些东西

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App store={store}/>
  </React.StrictMode>
);

这里我们将数据扔给了 App
然后我们在App组件编写代码如下

import './App.css';
import React from "react";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
 

  render(){
    return (
      <div className="App">
        <button onClick={() => {this.props.store.dispatch({ type:'INCREMENT' })}} >增加</button>
        <button onClick={() => {this.props.store.dispatch({ type:'DECREMENT' })}}>减少</button>
        <div onClick={() => {console.log(this.props.store.getState())}}>读取</div>
      </div>
    )
  }
}

export default App;