Redux总结

Drinkey 发布于2019-08-26 13:50 / 1405人阅读

做为一个前端小白，在自学Redux过程中个人认为首先需要明白Action、Store、reducer(state,action)、Component中间的关系，简单的可以理解为图书馆借书的过程，用户提出借什么书的请求给管理员，管理员去reducer里查找有没有你需要的书，reducer会返回一个state数据告诉管理员有没有这本书，用户通过store.getState()方法得到管理员从reducer得到的数据。

简介：以TodoList为例由浅入深的学习redux。
一、创建store、reducer，引入到文件后并调用store里数据

1、创建store:使用redux的createStore（）方法创建，导出store

// 创建store
import {createStore} from "redux"
// 引入reducer
import reducer from 路径

const store=createStore(reducer);

export default store;

3、创建reducer数据：直接返回函数，默认返回参数State

//创建reducer
const defaultState={}
export default (state=defaultState,action) => {
    return state;
}

4、将store文件引入到目录下，使用stroe.getState()方法获取reducer里的数据

5、声明action并使用store.dispatch(action)方法将action传递给store，reducer里接收store自行传过来的action与state数据并返回一个新的数据，

 // 组件订阅store
store.subscribe(被订阅者)，实现联动效果

hadChange(e){
  // 声明action
  const action={
    type："change_input_value";
    value:e.taget.value
  }
  // 将action传递给store
  store.dispatch(action)
}

// state只能接收数据不能操作数据，需要将数据进行深拷贝
if(action.type === "change_input_value"){
  const newState=JSON.parse(JSON.stringify(state));
  newState.value=action.value;
  return newState;
}

//store订阅一个更新函数，待dispatch之后，执行这个更新函数，获取新的值
store.subScribe(this.hadChangeValue.bind(this))
hadChangeValue(){
  this.setState(store.getState())
}

6、actionTyps.js是将所有action以变量的形式存到js文件里，方便后续因拼写出错导致查找报错原因，代码如下：

export const CHANGE_INPUT_VALUE ="change_input_value";
export const ADD_TODO_ITEM ="add_todo_item";
export const DELE_TODO_ITEM ="dele_todo_item";

二、详细代码如下：

1、创建Antds模块

import React, { Component,Fragment } from "react";
//引入antd库
import { Input,Button, List} from "antd";
import store from "../store/index.js"
import {CHANGE_INPUT_VALUE ,ADD_TODO_ITEM,DELE_TODO_ITEM} from "../store/actionTyps"

class Antds extends Component {
  constructor(props){
    super(props);
    this.state=store.getState();
    this.hadChange=this.hadChange.bind(this);
    this.changeValue=this.changeValue.bind(this);
    this.hadClick=this.hadClick.bind(this);
    //订阅store
    store.subscribe(this.changeValue)
  }

  hadChange(e){
    //声明一个action，它是一个函数
    const action={
      type:CHANGE_INPUT_VALUE,
      value:e.target.value
    }
    // 将action传给store，使用store提共的dispatch(action)方法
    store.dispatch(action)
  }
  // 点击按钮声明action
  hadClick(){
    const action ={
      type:ADD_TODO_ITEM,
    }
    // 将action传递给store
    store.dispatch(action)
  }
  changeValue(){
    // 感知到stoe发生变化后调用store.getState()
    this.setState(store.getState())
  }
  hadClickItem(index){
    const action ={
      type:DELE_TODO_ITEM,
      index
    }
    // 将action传递给store
    store.dispatch(action)
  }
  render() {
    return (
      
        
          
          
        
         (
            
             {item}
            
          )}
        />
      
    );
  }
}

export default Antds;

2、创建store

// 利用redux里的createStore（）方法创建store
import {createStore} from "redux"
// reducers里存放所有数据
import reducers from "./reducers"
const store=createStore(reducers);

// 导出store
export default store;

3、创建reducer

import {CHANGE_INPUT_VALUE ,ADD_TODO_ITEM,DELE_TODO_ITEM} from "./actionTyps"
const defaultState={
    inputValue:"",
      lis:[],
}

export default (state=defaultState,action)=>{
    if(action.type===CHANGE_INPUT_VALUE ){
        // 深拷贝
        const newState=JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        return newState;
    }
    if(action.type === ADD_TODO_ITEM){
        // 深拷贝
        const newState=JSON.parse(JSON.stringify(state));
        newState.lis.push(newState.inputValue);
        newState.inputValue="";
        return newState;
    }
    if(action.type === DELE_TODO_ITEM){
        // 深拷贝
        const newState=JSON.parse(JSON.stringify(state));
        newState.lis.splice(action.index)
        return newState;
    }
    return state;
}

4、将所有action以变量形式存到文件中

export const CHANGE_INPUT_VALUE ="change_input_value";
export const ADD_TODO_ITEM ="add_todo_item";
export const DELE_TODO_ITEM ="dele_todo_item";

-----------------持续更新中-------------------

云服务器 GPU云服务器 Redux redux源码 redux-saga react-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109628.html

对redux和react-redux的理解和总结（一）

摘要：使得在变化和异步中可预测。它是数据的唯一来源。指定了应用状态的变化如何响应并发送到的，只是描述了有事情发生了这一事实，并没有描述应用如何更新。更新的函数称为，它是一个纯函数，接受旧的和，返回新的。是和之间的桥梁，是把它们联系到一起的对象。为什么使用redux 随着前端单页面开发越来越复杂，javascript需要管理越来越多的状态state。如果一个model的变化引起另一个mode...

skinner 2019-08-22 18:19 评论0 收藏0
单页应用开发总结

摘要：本文想通过自己这一年的单页应用开发经验，来对的开发做一个总结。但是要知道，现如今页面都比较复杂，一般的单页应用都需要一个可靠的数据流去处理，否则在日后维护方面会难度巨大。本文想通过自己这一年的单页应用开发经验，来对SPA的开发做一个总结。页面开发模式通常我们在开发页面时，都会拿到一份设计图，假设我们拿到一份这样的设计图 showImg(https://segmentfault.c...

zzbo 2019-08-20 17:01 评论0 收藏0
一篇文章总结redux、react-redux、redux-saga

摘要：编辑器顶层组件不就了吗这就是。官方提供的绑定库。具有高效且灵活的特性。在的中，可以使用或者等来监听某个，当某个触发后，可以使用发起异步操作，操作完成后使用函数触发，同步更新，从而完成整个的更新。不就ok了吗？这就是 react-redux。Redux 官方提供的 React 绑定库。具有高效且灵活的特性。 React Redux 将组件区分为容器组件和 UI 组件前者会处理逻辑...

April 2019-05-21 19:08 评论0 收藏0
Redux 的简单总结

摘要：目前，官方没有提供监控部分改变的方法。这个函数执行后，在中被提及的成员会被替换。这个函数与相比，唯一的好处是假如组件定义不在入口文件如中，这种方法可以免于入口文件中的全局。 Redux https://redux.js.org/https://cn.redux.js.org/ store.getState() https://redux.js.org/api-refe... 这个函数返...

Elle 2019-08-22 17:33 评论0 收藏0
React组件设计实践总结05 - 状态管理

摘要：要求通过要求数据变更函数使用装饰或放在函数中，目的就是让状态的变更根据可预测性单向数据流。同一份数据需要响应到多个视图，且被多个视图进行变更需要维护全局状态，并在他们变动时响应到视图数据流变得复杂，组件本身已经无法驾驭。今天是 520，这是本系列最后一篇文章，主要涵盖 React 状态管理的相关方案。前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 评论0 收藏0