react-redux笔记

Posted 六月June June

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-redux笔记相关的知识,希望对你有一定的参考价值。

目录

目录

redux理解图

搭建环境

react-redux代码编写

创建reducer操作并存储全局state -reducer(state,action){return 新state}

store.js 引入reducer集中管理全局state

入口文件index.js  挂载store,让所有组件共享全局state

App组件挂载UI组件 

UI组件可以:①显示state,②发送action修改state

 


Redux是专门用于做状态管理的js库,一般与react配合使用,集中管理多个组件共享的状态。

文档:

https://redux.js.org/

https://www.redux.org.cn/

https://github.com/reactjs/redux

 

案例页面效果:

案例文件结构:

redux理解图

 

搭建环境

第一种:react脚手架

npm install -g create-react-app

create-react-app myapp

npm run start

第二种:用webpack配置

npm init -y

npm i babel-loader babel/core @babel/preset-env @babel/preset-react  webpack webpack-cli webpack-dev-server -D

npm i react react-dom redux react-redux redux-thunk redux-devtools-extension -S

react项目文件夹结构

node_modules
dist
    -main.js		默认出口文件
public				相当于url的根路径
    -favicon.cio
    -index.html		在浏览器中打开该文件访问整个项目
src
    -App.js
    -index.js		默认入口文件
    -index.css		通用css
package.json
webapck.config,js

创建webpack.config.js文件

module.exports = {
	mode:'development',			
    module: {
		rules: [
			{
				test: /\\.js|jsx$/,
				exclude: /(node_modules|bower_components)/ ,
				use: {
					loader: 'babel-loader',
					options: {
				  		presets: ['@babel/env','@babel/react']
					}
				}
			}
		]
	},
	devtool:'inline-source-map',
	watch : true 
}

在package.json中写dev和build命令:

npm run dev运行时构建,借助webpack-dev-server工具:不打包项目,实时监测代码,模拟生产环境的效果

npm run build是webpack打包命令:自动构建src/main.js文件,到dist/all.js文件中

  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "npx webpack serve",
    "build":"webpack"
  },

public/index.html中引入webpack-dev-server默认在内存中隐式生成的main.js文件


<body>
    <div id="app-container"></div> 
    <!-- webpack-dev-server 默认在内存中隐式生成一个main.js-->
    <!-- npm run dev 后访问localhost:8080-->
    <script src="/main.js"></script>
    <!-- npm run build 后右键在浏览器打开此文件-->
    <!-- <script src="../dist/main.js"></script> -->
</body>

想要项目打包后模拟生产环境:可在cmd中用serve命令

npm i serve -g

将index.html放在dist文件夹下,然后在dist文件夹下cmd命令 输入 serve,就能在localhost:5000打开index.html

<body>
    <div id="app-container"></div> 
    <script src="./main.js"></script>
</body>

react-redux代码编写

创建reducer操作并存储全局state -reducer(state,action){return 新state}

根据action改变state,返回新的state

constant.js用于定义action对象中type类型的常量值,目的:便于管理的同时防止程序员单词写错

reducers/compo1.js根据actions/compo1.js 操作并存储组件Compo1对应的state

export const ADD1 = 'add1'
export const REDUCE1 = 'reduce1'
export const ADD2 = 'add2'
export const REDUCE2 = 'reduce2'
<--reducers/compo1.js文件-->
import {ADD1, REDUCE1} from "../constant"
const initState = {v1: 0} //初始化状态
export default function countReducer(preState = initState, action) {
  const {type, data} = action
  switch (type) {
    case ADD1:
      return {...preState, v1: preState.v1 + data}
    case REDUCE1:
      return {...preState, v1: preState.v1 - data}
    default:
      return preState
  }
}

<--actions/compo1.js文件-->
import {ADD1, REDUCE1} from "../constant"
//同步action,就是指action的值为Object类型的一般对象
export const add1 = (data) => ({type: ADD1, data})
export const reduce1 = (data) => ({type: REDUCE1, data})

//异步action,就是指action的值为函数,异步action中一般都会调用同步action
export const add1Async = (data, time) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(add1(data))
    }, time)
  }
}

reducers/compo2.js根据actions/compo2.js 操作并存储组件Compo2对应的state

<--reducers/compo2.js-->
import {ADD2, REDUCE2} from "../constant"
const initState = {v2: 0} //初始化状态
export default function countReducer(preState = initState, action) {
  const {type, data} = action
  switch (type) {
    case ADD2:
      return {...preState, v2: preState.v2 + data}
    case REDUCE2:
      return {...preState, v2: preState.v2 - data}
    default:
      return preState
  }
}

<--actions/compo2.js 专门为Compo2组件生成action对象-->
import {ADD2, REDUCE2} from "../constant";
//同步action,值为Object类型
export const add2 = (data) => ({type: ADD2, data});
export const reduce2 = (data) => ({type: REDUCE2, data});

//异步action,值为函数,一般都会调用同步action。
export const add2Async = (data, time) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(add2(data));
    }, time);
  };
};

reducers/index.js汇总reducer

import { combineReducers } from 'redux'
// 引入reducer
import compo1 from './compo1'
import compo2 from './compo2'

//汇总所有的reducer
export default  combineReducers({
	compo1,
	compo2
})

 

store.js 引入reducer集中管理全局state

import {createStore, applyMiddleware} from "redux"
//引入redux-thunk,用于支持异步action
import thunk from "redux-thunk"
//引入redux-devtools-extension
import {composeWithDevTools} from "redux-devtools-extension"
//汇总后的reducer
import reducer from "./reducers"

export default createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

入口文件index.js  挂载store,让所有组件共享全局state

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import store from "./redux/store"
import {Provider} from "react-redux"
console.log(store)
ReactDOM.render(
  //Provider要求是最大的组件,通过属性将store往下传
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("app-container")
)

App组件挂载UI组件 

import React from "react";
import { PropTypes } from "prop-types";
import "./App.css"
import Compo1 from "./component/Compo1";  
import Compo2 from "./component/Compo2";  
class App extends React.Component{
    render() {
	    return (
            <div className="app">App组件
                <Compo1 />
                <Compo2 />
            </div>
        )
	}
}
export default App;

UI组件可以:①显示state,②发送action修改state

Compo1/index.js

import React from "react"
//链接UI组件和redux
import {connect} from "react-redux"
//引入组件1的actions,操作组件1维护的全局state
import {add1, reduce1, add1Async} from "../../redux/actions/compo1"
class Compo1 extends React.Component {
  render() {
    return (
      <div>
        <h2>Compo1组件,v1:{this.props.v1},v2:{this.props.v2}</h2>
        <button onClick={() => this.props.add1(2)}>操作v1,+2</button>
        <button onClick={() => this.props.reduce1(2)}>操作v1,-2</button>
        <button onClick={() => this.props.add1Async(2, 1000)}>
          操作v1,异步+2
        </button>
      </div>
    )
  }
}
// state数据
const mapStateToProps = (state) => ({
  v1: state.compo1.v1,
  v2: state.compo2.v2,
})
// actions方法
const mapDispatchToProps = {add1, reduce1, add1Async}
//接收全局state需要connect一下。一般map生成的组件不需要connect,因为不需要看见全局state
// connet()函数中两个参数函数返回的json中的k会自动成为props中的对象
// 组件中就可以通过this.props访问state数据和使用action方法了
export default connect(mapStateToProps, mapDispatchToProps)(Compo1)

Compo2/index.js

import React from "react"
//链接UI组件和redux
import {connect} from "react-redux"
//引入actions,操作全局state
import {add2, reduce2} from "../../redux/actions/compo2"
class Compo2 extends React.Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h2>Compo2组件,v1:{this.props.v1},v2:{this.props.v2}</h2>
        <button onClick={() => this.props.add2(2)}>操作v2,+2</button>
        <button onClick={() => this.props.reduce2(2)}>操作v2,-2</button>
      </div>
    )
  }
}
const mapStateToProps = (state) => ({
  v1: state.compo1.v1,
  v2: state.compo2.v2,
})
const mapDispatchToProps = {add2, reduce2}
export default connect(mapStateToProps, mapDispatchToProps)(Compo2)

 

 

以上是关于react-redux笔记的主要内容,如果未能解决你的问题,请参考以下文章

react-redux笔记

react-redux笔记

React 学习笔记总结

React 学习笔记总结

学习笔记:python3,代码片段(2017)

VScode插件推荐