redux入门事例

cheng10 发布于2019-08-22 16:28 / 2252人阅读

摘要：中定义来各个要做的事情。代码定义把封装成一个方法，这样用的时候不用每次定义，避免出错入口文件封装成方法，方便下面的的订阅调用每当时，订阅的函数就会执行现在有机关枪把。通过的来触发，中订阅的事件就会执行。触发，获取的值。

环境准备

为了方便，这里使用create-react-app搭建react环境

create-react-app mydemo

弹出配置

如果需要自定义react的配置，需要运行下面的命令把配置文件弹出来。

npm run eject

安装redux

npm i redux --save

简单理解

redux简单用法就是通过它的store来订阅和发布信息。
通过subscribe来订阅action，通过dispatch来触发action。reducer中定义来各个action要做的事情。

demo代码 reducer定义

const Add = "addGirl", Remove = "removeGirl";

export function reducer(state = 0, action) {
    switch (action.type) {
        case Add:
            return state + 1;
        case Remove:
            return state - 1;
        default:
            return 10;
    }
}

//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
    return { type: Add };
}
export function removeCreator() {
    return { type: Remove };
}

export function addAsync() {
    return (dispatch, getState) => {
        setTimeout(function () {
            dispatch(addCreator());
        }, 1000);
    }
}

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { createStore } from "redux";
import thunk from "redux-thunk";
import { reducer,addCreator,removeCreaator } from "./index.redux";
import { Provider } from "react-redux"

const store = createStore(reducer);

function render() {
    ReactDOM.render(
        ,
        document.getElementById("root")
    );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);

registerServiceWorker();

App.js

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    var store=this.props.store;
    var num=store.getState();
    return (
      
        现在有机关枪{this.props.num}把。
        
        
      
    );
  }
}

export default App;

通过store的dispatch来触发action，index.js中订阅的事件就会执行。

redux的异步执行

redux中如果需要执行异步操作，需要安装react-thunk插件

npm i react-thunk --save

同时需要redux插件的applyMiddleware

关键代码

设置其实很简单，创建store时，把thunk传递给它就行了。

import thunk from "redux-thunk";

const store = createStore(reducer, applyMiddleware(thunk));

在app.js中增加一个触发异步操作的按钮，reducer中已经定义了一个异步的方法。

export function addAsync() {
    return (dispatch, getState) => {
        setTimeout(function () {
            dispatch(addCreator());
        }, 1000);
    }
}

异步调用方法会返回一个有两个参数的方法，两个参数都是函数，第一个是dispatch函数，第二个是getState函数。
dispatch触发action，getState获取state的值。

在app.js中增加代码

服务器托管云服务器 Redux redux源码 redux-saga react-redux

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

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

编程范式 —— 函数式编程入门

摘要：在函数式编程中数据在由纯函数组成的管道中传递。函数式编程中函子是实现了函数的容器下文中将函子视为范畴，模型可表示如下但是在函数式编程中要避免使用这种面向对象的编程方式取而代之对外暴露了一个的接口也称为。 showImg(https://segmentfault.com/img/remote/1460000018101204); 该系列会有 3 篇文章，分别介绍什么是函数式编程、剖析函数...

flyer_dev 2019-08-23 15:07 评论0 收藏0
react-redux插件入门

摘要：描述这个插件可以让我们的代码更加的简洁和美观。安装使用提供了两个重要的接口使用了这个插件，的和就可以忘记来，它们就用不着了。现在有美女个。可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件，另外插一句，redux不是react的产品，vue和angular中也可以使用redux；下面简单讲解，如何使用rea...

Baaaan 2019-08-22 16:28 评论0 收藏0
Redux入门0x106: `react`、`vue`、`原生 js`集成`redux`

摘要：概述之前写的所有关于的文章都是纯粹的，是和框架无关环境无关的，所以我没有将和一起讲，为的是吧和分开，作为独立的个体来分析，提现的是一种思想，而不是一个思维定式。而现在我们可以尝试在中来使用了。 0x000 概述之前写的所有关于redux的文章都是纯粹的redux，是和框架无关、环境无关的redux，所以我没有将redux和react一起讲，为的是吧redux和react分开，作为独立...

BetaRabbit 2019-08-23 12:04 评论0 收藏0
Reactjs、redux的从入门到放弃、删库跑路示例

摘要：我的入门到放弃之路最近看到很多相关的问题跟讨论，越来越多的小伙伴喜欢这个框架了，同时也在看到了有些入门的小伙伴遇到了各种各样的问题，本人也是框架使用都一枚，公司是腾讯阿里平安三巨头合资的一家公司，分别上海深圳杭州北京广州等多个分部，前端人员 showImg(https://segmentfault.com/img/bVbhonB?w=1278&h=722); 我的react入门到放弃之...

Miracle 2019-08-20 17:43 评论0 收藏0