react redux学习(一)

Lsnsh 发布于2019-08-29 18:34 / 1762人阅读

摘要：项目目录安装创建列表项目创建文件夹文件夹下创建创建必须是纯函数，纯函数给定输入，固定输出，并且不能改变输入中如何获取的数据，及改变做如下修改组件中如何获取数据组件中引入文件下的在中如何改变的数据创建改变数据返回一个新的数据如何监听的数据

项目目录

1、安装redux yarn add redux 2、创建store

列表项目创建store文件夹

文件夹下创建index.js

index.js

         import { createStore } from "redux";
         const store = createStore();
         export default store;

3、创建reducer.js

        const defaultState = {
            inputValue:""
        }
        export default (state = defaultState,action) => { return state }

reducer必须是纯函数，纯函数给定输入，固定输出，并且不能改变输入

5、store中如何获取reducer的数据，及改变

    //index.js做如下修改
    import { createStore } from "redux";
    import reducer from "./reducer"
    const store = createStore(reducer);
    export default store;

6、组件中如何获取store数据

组件中引入store文件下的index.js

在constructor中 this.state = store.getState();

7、如何改变store的数据

创建action const action = { type:"input_action",val:val};

store.dispatch(action) -> store ->reducer改变store数据返回一个新的state数据

8、如何监听 store的数据改变，刷新dom

组件中的constructor使用 store.subscribe(this.listener.bind(this));

listener () { this.setState(store.getState())};

9、优化action的type,报错可以定位

创建actionTypes.js

export const CHANGE_INPUT_VALUE = "change_input_value";

10、优化actionCreator.js,统一管理组件的action

    import { CHANGE_INPUT_VALUE} from "./actionTypes"
    export const changeFocuse = (inputValue) => ({
        type:CHANGE_INPUT_VALUE,
        inputValue
    });

11、优化reducer.js

    import { CHANGE_INPUT_VALUE} from "./actionTypes"
    const defaultState = {
        inputValue:""
    }
    export default (state = defaultState,action) => { 
        switch (action.type){
            case CHANGE_INPUT_VALUE:
                const newState = JSON.parse(JSON.stringify(state));
                newState.inputValue = action.inputValue;
                return newState;
            default:
                return state
        }
    }

GPU云服务器云服务器 react-redux React_Redux_Appointm react-router-redux Redux

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

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

【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0
React,Redux学习笔记

摘要：维护着一个全局的，并且根据来进行事件分发处理。如果想和其它框架集成，使用或者来设置定时器，或者发送请求，可以在该方法中执行这些操作。在该函数中调用将不会引起第二次渲染。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在中创建的元素。 @(StuRep)2016.06.10 React的PropTypes使用方法 React.PropTypes.array // 数组 Reac...

lauren_liuling 2019-08-22 10:38 评论0 收藏0
从设计的角度看 Redux

摘要：协调状态的这三个方面是前端开发的重要组成部分，对这项任务有不同程度的支持。这使得保持高度统一。的真正威力到目前为止，看上去只是的辅助工具。在的术语中这称之为派发动作。撤销重做流行的撤销重做功能需要系统级规划。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！你知道 Redux 真正的作用远不止状态管理吗？你是否想要了解 Redux 的工作原理？让我们深入研究 ...

fantix 2019-08-23 17:06 评论0 收藏0
Byemess-基于React&redux的在线Todo应用

摘要：在线注册账号，数据存储于。年了，还不使用的异步控制体系。过度对数据模型进行装饰的结果便是高耦合，这跟我初衷是基于在线存储数据有关。为什么又是Todo，全世界的初学者都在做todo吗？可能很多人要问这句话，其实这句话可以等同于：为什么你做了个云音乐播放器？为什么你做了个新闻阅读APP？为什么你做了个VUE/REACT版本的CNODE？究其本质，这几个应用都是data-map...

MRZYD 2019-08-20 17:07 评论0 收藏0
React-redux基础

摘要：简介创建的函数，返回一个对象，包含等方法合并多个中间件处理，在实际的前调用一系列中间件，类似于绑定和函数式编程中常见的方法，介绍官方提供的绑定库。前言在学习了React之后，紧跟着而来的就是Redux了~ 在系统性的学习一个东西的时候，了解其背景、设计以及解决了什么问题都是非常必要的。接下来记录的是，我个人在学习Redux时的一些杂七杂八~ Redux是什么通俗理解 h...

jsyzchen 2019-08-23 15:09 评论0 收藏0
React 升级：Redux

摘要：正如我们前面的教程所提到的，在组件之间流通数据更确切的说，这被叫做单向数据流数据沿着一个方向从父组件流到子组件。这就是如何使数据流变得更简单的原因。它是一种倾向单向数据流比如的设计模式。这是因为总是接受和返回状态用来更新。前言近期接触React项目，学到许多新知识点，网上教程甚多，但大多都把知识点分开来讲，初学者容易陷入学习的误区，摸不着头脑，本人在学习中也遇到许多坑。此篇文章是笔...

garfileo 2019-08-20 15:44 评论0 收藏0