【React】 18课 简单理解redux

本章主要讲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"
]
}
}

运行结果如下：