新搭建的个人博客,本文地址:React学习笔记5:学习Redux
好久没写东西了!!!!
Redux是React官方推荐数据流管理方法Flux的实现之一,当然Redux是非必选,仅仅是众多实现中可选项罢了,不过是最大众选择!
Redux的详细介绍可以看下其他童鞋的文章,比如:[Redux 介绍],总之一搜有很多文章,本文直接引导如何使用。
1、搭建一个基础Hello world的React项目,参考React学习笔记1:环境搭建
import React from 'react'
import ReactDom from 'react-dom'
class Hello extends React.Component
{
constructor(props) {
super(props)
}
render() {
return (
<div>
Hello World
</div>
)
}
}
ReactDom.render(
<Hello />,
document.getElementById('example')
);
2、修改相关代码,点击一个button,翻译Hello world为『您好,世界』
import React from 'react'
import ReactDom from 'react-dom'
class Hello extends React.Component
{
constructor(props) {
super(props)
this.state = {info:'Hello World!'}
}
changeLang() {
this.setState({info:'您好,世界!'})
}
render() {
return (
<div>
<button onClick={this.changeLang.bind(this)}>翻译</button> {this.state.info}
</div>
)
}
}
ReactDom.render(
<Hello />,
document.getElementById('example')
);
3、js有太多的语法糖,上面onClick绑定changeLang方法,在es6下也存在多种实现,比如还有如下:
<button onClick={()=>this.changeLang()}>翻译</button> {this.state.info}
如果使用更新的es7语法stage-0标准,还可如下实现:
//webpack.config.js 增加如下配置
query: {
presets: ['es2015','stage-0','react']
}
//函数书写方式变化
changeLang = () => {
this.setState({info:'您好,世界!'})
}
render() {
return (
<div>
<button onClick={this.changeLang}>翻译</button> {this.state.info}
</div>
)
}
4、引入Redux支持
npm install --save redux
5、Redux的核心就是Actions、Reducers 和 Store,通俗点理解,Store存储了一颗数据总树,保存了整个应用程序的一切数据。数据的变动,或者触发数据变动的事件,都会生成一个Actions(类似消息,Flux提供了消息封装标准),Reducers是监听所有Actions的函数,根据Actions不同,做相应的处理
6、如上所说,首先我们要为整个应用创建一个全局的Store
import {createStore} from 'redux'
//此store可以存在全局,示例程序暂时存在redux组件内(constructor中)
this.store = createStore(this.reducer.bind(this))
7、Actions监听执行者,也即Reducers,单独的函数,如下
//此处定义了两个消息,每个消息完成自己的任务后,把数据状态在返回出去
//reducer
reducer(state = {},action) {
console.log('reducer init state ',state,' action ',action);
switch (action.type) {
case 'chinese':
//do something
return {
state,
msg:'您好,世界!'
}
break;
case 'english':
//do something
return {
state,
msg:"Hello World!"
}
break;
default:
return state
}
}
8、OK,发送一个消息!消息一般都是由一个Actions指定,Actions其实也是一个函数,消息类型就是json对象
sendShowChineseMsg = () => {
return {
type:'chinese'
}
}
9、分发消息吧,刷新页面,打开Console,点击翻译,看下消息详情
changeLang = () => {
//this.setState({info:'您好,世界!'})
this.store.dispatch(this.sendShowChineseMsg())
}
//第一遍是系统初始化,系统发出init消息,第二次刷新可以看到chinese消息,第三次刷新会把前一次的状态及消息发出来
reducer init state Object {} action Object {type: "@@redux/INIT"}
bundle.js:99 reducer init state Object {} action Object {type: "chinese"}
bundle.js:99 reducer init state Object {state: Object, msg: "您好,世界!"} action Object {type: "chinese"}
10、ok,接收消息做出响应(利用store的subscribe方法,执行监听),看下效果!
this.store.subscribe(() => {
console.log('store_0 has been updated. Latest store state:', this.store.getState());
// 更新你的React数据
this.setState({info:this.store.getState().msg})
})
11、如上已经完成了消息的创建、传递、处理,而且完全融合在React中,不过Redux跟React融合在一起,官方提供更好的react-redux融合,我这样去做,只是更好的去理解Redux
12、点击完翻译后,5s后自动翻译回英文
changeLang = () => {
//this.setState({info:'您好,世界!'})
this.store.dispatch(this.sendShowChineseMsg())
setTimeout(()=>{
this.store.dispatch(this.sendShowEnglishMsg())
},5000)
}
sendShowEnglishMsg = () => {
return {
type:'english'
}
}
13、放出完整示例
import React from 'react'
import ReactDom from 'react-dom'
import {createStore} from 'redux'
class Hello extends React.Component
{
constructor(props) {
super(props)
this.state = {info:'Hello World!'}
this.store = createStore(this.reducer)
this.store.subscribe(() => {
console.log('store_0 has been updated. Latest store state:', this.store.getState());
// 更新你的React数据
this.setState({info:this.store.getState().msg})
})
}
changeLang = () => {
//this.setState({info:'您好,世界!'})
this.store.dispatch(this.sendShowChineseMsg())
setTimeout(()=>{
this.store.dispatch(this.sendShowEnglishMsg())
},5000)
}
sendShowChineseMsg = () => {
return {
type:'chinese'
}
}
sendShowEnglishMsg = () => {
return {
type:'english'
}
}
reducer = (state = {},action) => {
console.log('reducer init state ',state,' action ',action);
switch (action.type) {
case 'chinese':
return {
state,
msg:'您好,世界!'
}
break;
case 'english':
return {
state,
msg:"Hello World!"
}
break;
default:
return state
}
}
render() {
return (
<div>
<button onClick={this.changeLang}>翻译</button> {this.state.info}
</div>
)
}
}
ReactDom.render(
<Hello />,
document.getElementById('example')
);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。