【React】 18课 简单理解redux
程序员文章站
2022-03-16 17:44:53
...
本章主要讲redux的js文件内的代码原理以及使用方法:
简单理解redux是干什么的:
其实redux与vuex类似,是用于redux内各组件间通讯的数据存储仓库
首先我们来看以下文件目录结构:
在此之前我们需要给React项目安装redux插件 命令如下:
npm install redux --save
重点:redux文件夹内index.js代码如下:
import {createStore} from "redux"; //引入redux
/*
state:数据原先的状态
action:需要来进行改造的内容
action.type 决定你要处理的类型
进行判断:if,swich
*/
export function reducer(state=0,action){
switch(action.type){
case '增加一条数据':
return state + 1
case '删除一条数据':
return state - 1
default:
return 0
}
}
//createStore创建一个store库 通过store.getState()可以查看数据变化情况
const store = createStore(reducer); //参数接收reducer函数
console.log(store.getState()); //输出数据的初始值
//订阅事件
function listener(){
const getCurrent = store.getState();
console.log(`现在的数据是${getCurrent}条`)
}
//监听到dispatch事件执行,后数据改变时就执行listener()
store.subscribe(listener)
//dispatch派发事件 转递action.type 执行reducer函数
store.dispatch({
type:'增加一条数据'
})
store.dispatch({
type:'增加一条数据'
})
store.dispatch({
type:'删除一条数据'
})
src文件夹内的index.js代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './redux/index'; //引入redux
ReactDOM.render(
<App />,
document.getElementById('root')
);
src文件夹内的App.js代码如下:
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<h1>redux</h1>
</div>
)
}
}
package.json代码如下:
{
"name": "myapp1",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"redux": "^4.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
运行结果如下:
上一篇: minio文件服务器安装