Redux的简单用法

chanjarster 发布于2019-08-26 10:45 / 1642人阅读

Redux简单的一个小实例

import React from "react";
import { createStore } from "redux";

const initState = [
    {
        id: 1,
        text: "test1"
    }
];

const reducer = function(state = initState, action) {
    switch(action.type) {
        case "ADD_TODO":
            return [
                ...state,
                action.payload
            ]
        default:
            return state;
    }
}

const store = createStore(reducer);


class Index extends React.Component {

    constructor() {
        super();
        this.state = {
            todos: [],
            val: ""
        }
    }

    temp = null;

    componentDidMount() {
        this.setState({
            todos: store.getState()
        });
        this.temp = store.subscribe(() => {
            this.setState({
                todos: store.getState()
            });
        });
    }

    componentWillUnmount() {
        this.temp();
    }

    handleChangeVal = (e) => {
        this.setState({
            val: e.target.value
        });
    }

    handleEnter = (e) => {
        if(e.keyCode === 13) {
            const val = e.target.value;
            const action = {
                type: "ADD_TODO",
                payload: {
                    id: val,
                    text: val
                }
            };
            store.dispatch(action);
        }
    }

    render() {
        const { val } = this.state;
        return (
            
                Redux的使用实例
                
                
                    {
                        this.state.todos.map((item, index) => {
                            return (
                                {item.text}
                            )
                        })
                    }
                
            
        )
    }
}

export default Index;

GPU云服务器云服务器 Redux 的用法 redux源码 cdn的用法

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

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

redux-saga框架使用详解及Demo教程

摘要：通过创建将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替中间件。 redux-saga框架使用详解及Demo教程前面我们讲解过redux框架和dva框架的基本使用，因为dva框架中effects模块设计到了redux-saga中的知识点，可能有的同学们会用dva框架，但是对redux-saga又不是很熟悉，今天我们就来简单的讲解下saga框架的主要API和如何配合redux框...

Nosee 2019-08-23 11:49 评论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 学习起来很困难？写起代码来很啰嗦？一起来看看 Rematch 的作者对 Redux 的思考和简化吧~ 原文：《Redesigning Redux》, Shawn McKay 都过...

kidsamong 2019-08-22 18:06 评论0 收藏0
context来了，也许该放手redux or mobx...

摘要：官方推荐使用的情况是当需要用到全局数据的时候，比如主题，多语言制或者用户登录授权等等。老铁，学不动了？不要慌，耽误不了你几分钟...(说谎脸，汗) long long ago 使用react的同胞们，也许都苦恼过其状态管理以及组件之间的数据传递和共享（笨重的方式通过props依次往子组件传递）。这时候，redux（mobx类似）出现了，我们累死累活的从水深火热中解放了（第三方的库相...

bingo 2019-08-02 16:03 评论0 收藏0