资讯专栏INFORMATION COLUMN

Redux的简单用法

chanjarster / 1364人阅读

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;

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

转载请注明本文地址: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 评论0 收藏0
  • 一篇文章总结redux、react-reduxredux-saga

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

    April 评论0 收藏0
  • 重新设计 Redux

    摘要:相关状态父组件传递给子组件的状态。外部状态状态是可以从视图库中移出来的,然后可以使用提供者消费者模式把状态重新连接回视图库。重新设计在我看来,重写是有其必要性的,至少有以下个方面可以改进得更友好。 Redux 学习起来很困难?写起代码来很啰嗦?一起来看看 Rematch 的作者对 Redux 的思考和简化吧~ 原文:《Redesigning Redux》, Shawn McKay 都过...

    kidsamong 评论0 收藏0
  • context来了,也许该放手redux or mobx...

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

    bingo 评论0 收藏0

发表评论

0条评论

chanjarster

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<