【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"
    ]
  }
}

运行结果如下：