React：redux的基本使用（个人学习笔记）（redux版本：^8.0.2）

目录

一、安装依赖：

二、建立 store 文件，分别建立一个 index.js 和 reducer.js 文件

三、引入

 四、在组件中使用：（注：本次使用函数式组件，这里是在 App.js）

---

一、安装依赖：

npm i redux react-redux

二、建立 store 文件，分别建立一个 index.js 和 reducer.js 文件

reducer.js

// 定义一个默认状态
const defaultState = {
  msg: '你好！罗同学'
}

// 导出一个函数
export default (state=defaultState, action) => {
  let newState = JSON.parse(JSON.stringify(state)) // 深拷贝
  switch (action.type) {
    case 'changeMsgFn':
      newState.msg = action.value
      break;
  
    default:
      break;
  }
  return newState
}

index.js

import reducer from "./reducer";
import { createStore } from "redux"; // 从 redux 中引入创建仓库的方法

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

export default store // 导出仓库

三、引入

在最外层的入口文件引入

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


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

扫描二维码关注公众号，回复： 15910014 查看本文章

 四、在组件中使用：（注：本次使用函数式组件，这里是在 App.js）

引入：

import { connect } from 'react-redux'

声明一个函数来将 store 中的变量通过 props 注入组件,，详细看图。

import React from 'react'
import { connect } from 'react-redux'

function App(props) {
  return (
    <>
      <div>App{props.msg}</div>
      <button onClick={props.changMsg}>修改</button>
    </>
  )
}

const mapStateToProps = (state) => {
  return {
    msg: state.msg
  }
}

const MapDispatchToProps = (dispatch) => {
  return {
    changMsg() {
      const action = {type: 'changeMsgFn', value:'我的答'}
      dispatch(action)
    }
  }
}

// 连接器是高级函数
// 第一个括号：
//          * 必填 第一个参数:一个接收想要的共享数据的 （将数据通过 props 传递给组件， 名称随便，不一定是mapStateToProps）
//          * 选填 修改共享数据的方法, 返回一个修改的方法, 对应 actions ，他来接收
// 第二个括号：第二个参数:组件名称
export default connect(mapStateToProps, MapDispatchToProps)(App)