欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【React】 18课 简单理解redux

程序员文章站 2022-03-16 17:44:53
...

本章主要讲redux的js文件内的代码原理以及使用方法:

简单理解redux是干什么的:

其实redux与vuex类似,是用于redux内各组件间通讯的数据存储仓库

首先我们来看以下文件目录结构:

【React】 18课 简单理解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"
    ]
  }
}

运行结果如下:

【React】 18课 简单理解redux

相关标签: react