【React.js】之Redux

Redux概述

Redux = Reducer + Flux

安装ant design

yarn add antd

Store的创建

src目录下, 创建store文件夹，创建文件index.js
index.js

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);export default store;

reducer.js

const defaultState = {inputValue: '123',list:[1,2]
}export default (state = defaultState, action) => {if(action.type === 'change_input_value') {const newState = JSON.parse(JSON.stringify(state));newState.inputValue = action.value;return newState;}if(action.type === 'add_todo_item') {const newState = JSON.parse(JSON.stringify(state));newState.list.push(newState.inputValue);newState.inputValue = '';return newState;}console.log(state, action);return state;
}

todoList.js

import store from './store';class TodoList extends Component {constructor(props) {super(props);// 从store中取数据this.state = store.getState();this.handleInputChange = this.handleInputChange.bind(this);this.handleStoreChange = this.handleStoreChange.bind(this);this.handleBtnClick = this.handleBtnClick.bind(this);store.subscribe(this.handleStoreChange);}
}

安装redux 开发工具

工具：redux devtools
监听Input变化

TodoList.js

  <Inputvalue = {this.state.inputValue}placeholder = "todo info"style = {{width: '300px', marginRight: '10px'}}onChange={this.handleInputChange}/><Button type="primary" onClick={this.handleBtnClick}>提交</Button>

handleInputChange(e) {const action = {type: 'change_input_value',value: e.target.value}store.dispatch(action);
}handleStoreChange() {// console.log('store changed');this.setState(store.getState());
}handleBtnClick() {const action = {type: 'add_todo_item'};store.dispatch(action);
}

Redux注意点

store是唯一的
只有store能改变自己的内容
Reducer必须是纯函数

Redux API

createStore
store.dispatch
store.getState
store.subscribe

【React.js】之Redux相关推荐

彻底征服 React.js ＋ Flux + Redux【讲师辅导】-曾亮-专题视频课程
彻底征服 React.js + Flux + Redux[讲师辅导]-74574人已学习课程介绍 [会员免费]链接 http://edu.csdn.net/lecturer/585 ...
React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番关于webpack2.0和1.x的区别概括起来就是tree shaki ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
React.js 2016 最佳实践徬梓阅读 1584收藏 71
为什么80%的码农都做不了架构师?>>> 译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验.2016来了 ...
撰写本文的所有基本React.js概念
Update: This article is now part of my book "React.js Beyond The Basics". 更新:本文现在是我的书<超 ...
React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
2020 年，React.js 开发者如何更好地修炼内功？
整理 | 弯月,责编 | 郭芮出品 | CSDN(ID:CSDNnews) ReactJS(简称Reat)是最流行的前端框架.它由Facebook开发,近年来发展迅猛,已成为了基于组件GUI开发的标 ...
[译] 我多希望在我学习 React.js 之前就已经知晓这些小窍门
原文地址:What I wish I knew when I started to work with React.js 原文作者:David Yu 译文出自:掘金翻译计划本文永久链接:github ...
React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson2 ...

【React.js】之Redux

Redux概述

Redux = Reducer + Flux

安装ant design

Store的创建

安装redux 开发工具

Redux注意点

Redux API

【React.js】之Redux相关推荐

最新文章

热门文章