redux精品先导课程—01初始redux

约定不等于承诺〃 2022-03-10 03:48 167阅读 0赞

### 1.基础 ###

学习redux之前需要掌握以下知识

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2.redux知识结构 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 3.实际操作 ###

打开daily项目，进行

① npm i

② node ser

然后可以运行起来了，自动打开一个[http://localhost:9000/][http_localhost_9000]的页面

先大概看一下代码

import { createStore } from 'redux';
    
    function counter(state=0, action) {  //相当于reducer
        let {type} = action;
    
        switch (type) {
            case 'INCREMENT':
                return ++state;
            default:
                return state;
        }
    }
    
    let store = createStore(counter);
    
    $(document).click(ev=>{
        store.dispatch({ type: 'INCREMENT' });  // 相当于action
    });
    
    store.subscribe( ()=>{
        let state = store.getState();
        console.log(state);
    } );

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220310/7768e8bf833f48789cc4f24cd4906b13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220310/46a7e2f25ed04f0eb57234105f89ceea.png
[http_localhost_9000]: http://localhost:9000/

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 Redux—redux-thunk——combineReducers

任何对数据的才做都会经理renducer，reducer要求是个纯函数（在函数内部不能修改函数的参数(输入)，要有返回值），它的功能是：传入旧的state，根据action对s

小灰灰/ 2022年11月22日 02:49/ 0 赞/ 162 阅读

相关 redux精品先导课程—05redux-thunk中间件

首先安装redux-thunk这个插件 > npm i -S redux-thunk 然后再重启服务器：node ser 首先执行下面操作，激活thunk ![wat

桃扇骨/ 2022年03月10日 12:58/ 0 赞/ 197 阅读

相关 redux精品先导课程—04action创建函数

可以将上一节的代码进行优化 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

Bertha 。/ 2022年03月10日 05:14/ 0 赞/ 137 阅读

相关 redux精品先导课程—04计数器-redux版本

import { createStore } from 'redux'; let $addCounter = $('.counterBox .addC

迈不过友情╰/ 2022年03月10日 05:12/ 0 赞/ 181 阅读

相关 redux精品先导课程—03计数器-DOM版本

实现的代码 let $addCounter = $('.counterBox .addCounter'); let $counterPanrl = $('.c

偏执的太偏执、/ 2022年03月10日 04:50/ 0 赞/ 168 阅读

相关 redux精品先导课程—02redux基本概念

1.相关概念 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

不念不忘少年蓝@/ 2022年03月10日 03:52/ 0 赞/ 157 阅读

相关 redux精品先导课程—01初始redux

1.基础学习redux之前需要掌握以下知识 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

约定不等于承诺〃/ 2022年03月10日 03:48/ 0 赞/ 168 阅读

相关 redux精品先导课程—06combinereducers

上一节我们讲的是只有一个面板的，现在我们要变成两个面板，要怎么操作呢？首先index.html里面的ui代码先复制一份 ![watermark_type_ZmFuZ3po

叁歲伎倆/ 2022年03月08日 06:48/ 0 赞/ 179 阅读

相关 redux精品先导课程—08使用react-redux连接

首先安装这个库 npm i -S react-redux，然后用node ser跑起服务器下面将上一节的代码进行改变 App.js require('style

绝地灬酷狼/ 2022年03月06日 16:33/ 0 赞/ 193 阅读

相关 redux精品先导课程—07react手动连接

还是上一节的项目，首先安装以下依赖库。 > npm i -S react react-dom > > npm i -D prop-types babel-preset-re

逃离我推掉我的手/ 2022年03月06日 13:44/ 0 赞/ 182 阅读