1. 安装 redux 监听工具 ( 需要翻墙 )

  打开 谷歌商店

  搜索 redux devtool

  安装第一个即可

2. 安装 redux

  yarn add redux

3. 创建 一个 store 文件夹( 与 项目 index.js 文件 同级 ) 并在 store 内 创建一个 reducer.js 文件 用于 区分各组件状态

  # store/reducer.js

  // 初始化 各组件的状态

  const defaultState = {

    inputValue : '', // 初始化  TodoList 的输入框的值

    list : []  // 初始化 TodoList 列表的值

  };

  export default (state = defaultState, action)=>{

    return state;

  }

4. 在 store 文件夹内 创建 index.js 创建一个公共存储仓库, 将组件的各个状态作为参数传入

  #store/index.js

  import {createStore} from 'redux';

  import reducer from './reducer'

  const store = createStore(reducer);

  export default store;

5. TodoList 内使用 store 进行数据存储

  引入 store.js  ( index.js 和 store 文件夹 是在同一级 )

  import store from './store';

  在 constructor 方法内 引入 store 的 state

  constructor(props){

    super(props);

    this.state = store.getState();  // 当前 this.state 即可获得 store的 state 的内容

  }

  

6.  当输入框改变时 改变 store 内的 inputValue 的数据

  Input 添加 onChange 事件

    # TodoList.js

    <Input onChange={this.inputChange.bind(this)} />

    inputChange(e){

      // 调用 store.dispatch( action ) 方法 通知 store 变更 inputValue

      const action = {

        type : 'change_input_value',

        value : e.target.value

      };

      store.dispatch( action );

    }

    # store 将 接收到的 state 和 action 转发给 reducer

    # store/reducer.js

    // reducer 可以接收 state 但是绝不可以修改 state

    export default (state, action)=>{

      // 打印 reducer 接收到的 state 和 action

      console.log( state, action );

      // 对 state 进行深复制 为 newState , 修改 newState 的值 并返回 newState

      if( action.type === 'change_input_value' ){

        const newState = JSON.parse( JSON.stringify( state ) );

        newState.inputValue = action.value;

        return newState;

      }

      return state;

    }

    # 当 store 返回数据发生了变化 需要 TodoList 订阅 store 数据变化 并进行 state 的 赋值

    # TodoList.js

    import store from './store'

    constructor(){

      // 订阅 store 的变化  并 编写 监听变化的 函数

      store.subscribe(this.handStoreChange);

      this.handStoreChange = this.handStoreChange.bind(this);

    }

      // 将 store 的值 重新 赋值给组件

    handStoreChange(){

      this.setState( store.getState() );

    }

7. 同理 编写 列表 和 删除功能

#index.js

import React from 'react';

import ReactDOM from 'react-dom';

import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

#TodoList.js

import React, { Component } from 'react';

import 'antd/dist/antd.css';

import { Input, Button, List } from 'antd';

import store from './store';

class TodoList extends Component{

constructor(props){

super(props);

this.state = store.getState();

this.inputValueChange = this.inputValueChange.bind(this);

this.addItem = this.addItem.bind(this);

this.delItem = this.delItem.bind(this);

this.handleStoreChange = this.handleStoreChange.bind(this);

store.subscribe(this.handleStoreChange);

}

render(){

return (

<div style={{ marginTop: '10px', marginLeft: '10px'  }}>

<div>

<Input placeholder="请输入" value={this.state.inputValue} onChange={this.inputValueChange} style={{marginRight: '10px' , width: '300px'}} />

<Button type="primary" onClick={this.addItem}>提交</Button>

</div>

<div>

<List

style={{width: '300px', marginTop: '10px'}}

bordered

dataSource={this.state.list}

renderItem={(item, val)=> <List.Item index={val} onClick={this.delItem}>{item}</List.Item>}

/>

</div>

</div>

);

}

handleStoreChange(){

this.setState(store.getState());

}

addItem(){

const action = {

type: 'add_item',

value: this.state.inputValue

}

store.dispatch(action);

}

delItem(e){

const action = {

type : 'del_item',

value : e.target.getAttribute('index')

}

store.dispatch(action);

}

inputValueChange(e){

const action = {

type : 'input_value_change',

value : e.target.value

}

store.dispatch(action);

}

}

export default TodoList;

#store/index.js

import {createStore} from 'redux';

import reducer from './reducer';

const store = createStore(reducer);

export default store;

#store/reducer.js

const defaultState = {

inputValue : '',

list : []

}

export default (status = defaultState, action)=>{

console.log(status, action)

if(action.type === 'input_value_change'){

const newState = JSON.parse(JSON.stringify(status));

newState.inputValue = action.value;

return newState;

}

if(action.type === 'add_item'){

const newState = JSON.parse(JSON.stringify(status));

newState.list = [...newState.list, action.value];

newState.inputValue = '';

return newState;

}

if(action.type === 'del_item'){

const newState = JSON.parse(JSON.stringify(status));

newState.list.splice(action.value, 1);

return newState;

}

return status;

}

14. react 基础 redux 的编写 TodoList 功能的更多相关文章

  1. 4. react 基础 - 编写 todoList 功能

    编写 TodoList 功能 react 入口 js #src/index.js import React from 'react'; import ReactDOM from 'react-dom' ...

  2. 13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式

    1. redux 简述 当 store 内的 数据进行变更的时候  多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store  代表数据存储 (例如: 图书馆管理 ...

  3. react native redux saga增加日志功能

    redux-logger地址:https://github.com/evgenyrodionov/redux-logger 目前Reac native项目中已经使用redux功能,异步中间件使用red ...

  4. react用redux 做的todolist

    ### 1. 创建项目  create - react - app  项目名(shop) ### 2. 进入项目,下载redux  cnpm install redux  --save  ### 3. ...

  5. (三)React基础

    3-1 使用React编写TodoList功能 import { Fragment} from ‘react’ Fragment是占位符 用于替代最外层div元素, 防止生成的元素会有两层div嵌套这 ...

  6. 18 react react-redux 的编写 TodoList

    1. 安装 react-redux yarn add react-redux 2. react-redux 编写 TodoList 使所有子组件 都能使用 store #index.js import ...

  7. 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)

    背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...

  8. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  9. 详解 Node + Redux + MongoDB 实现 Todolist

    前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...

随机推荐

  1. windows清理命令

    总是有一些设备需要清理,第三方的软件有不可以安装,那么,就需要这两条命令来做: cleanmgr /sageset:99 #设置要被清理的东西 cleanmgr /sagerun:99 #执行清理操作 ...

  2. tools.quartz.about

    官方网站,中文文档,demo,  参考零, 参考一, 参考二, 参考三, 参考四 , 参考五 ,文档下载 .

  3. 013、Java中int类型转换byte

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. Scala 线性化规则和 super 操作

    如果一个类有多个父类,且父类的有相同的函数 f,在子类和父类中调用 super.f 都是按从右到左的调用函数的顺序. 这个规则名为:Linearization Rules 如下的代码 trait Ba ...

  5. log4j 功能说明

    log4j 是一个非常强大的日志工具,应用于很多开源项目的.具体有以下几种功能: 定制不同输出的级别:ALL > TRACE > DEBUG > INFO > WARN > ...

  6. Codeforces 459E Roland and Rose

    本以为是个树形DP,按照树形DP的方法在那里dfs,结果WA到死,因为它存在有向环,不是树,凡是存在环的情况切记不要用树形的方法去做 题目的突破点在于将边排完序之后,用点表示以该点为边结尾的最大长度, ...

  7. 五、Vue:使用axios库进行get和post、用拦截器对请求和响应进行预处理、Mock(数据模拟)

    一.axios [应用]进行请求和传表单 [axios中文档]:https://www.kancloud.cn/yunye/axios/234845 [vue-axios]:https://cn.vu ...

  8. Codeforces Round #618 (Div. 2) 小号上紫之路

    这一场涨了不少,题也比较偏思维,正好适合我 A. Non-zero 我们记录这些数字的总和sum,并且记录0的个数zero,显然答案应该是这些0的个数,注意如果sum+zero==0的话答案要额外加一 ...

  9. 51nod 1439:互质对 容斥原理

    1439 互质对 题目来源: CodeForces 基准时间限制:2 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  取消关注 有n个数字,a[1],a[2],-,a[n ...

  10. 安装python包的两种方法

    1.在 anaconda 环境中安装包 selenium conda install selenium 2.python 下安装包 selenium pip install selenium 3.测试 ...