react之redux新手入门

之前看过阮一峰老师的redux教程，总感觉在描述上有太多的专业术语，反而增加了理解的难度，所以希望自己使用自己的方式来总结一下redux的使用方法。

第一点、无论任何时候，我们应该明白，redux能干什么，为什么要使用它？
阮一峰老师的一种描述很经典，“当你不知道要不要使用redux的时候，那就不需要使用redux！”
阮一峰老师也描述了什么时候该用redux，主要有这么几点：
1、某个组件的状态需要共享。
2、某个组件的状态需要在任何地方拿到。
3、一个组件需要改变全局状态。
4、一个组件需要改变另一个组件的状态。

但是我觉得这个描述太过于概念化，对新手的理解还是有些难度，我们不如记住这样的一句话：两个无关的组件，其中一个要引起另一个的变化，这时候就需要redux。

举个例子：在react/react-native中，组件的通信一般有两种方式，一种一个父组件给子组件传值（父传子），另一种就是子组件给父组件传值（子传父）。但是当这个组件的层级达到10层呢？怎么由最底层的某个属性传递到最高层的，让最高层的状态发生变化！这时候单纯的react就做不到了，就算你使用了无限通过属性的方式传值，你还会发现有其他的一些问题，这样很麻烦且代码管理很混乱。这时候redux就该出马了。
第二点、实践出真知，看我们如何实现一个最简单的计数器的redux应用。在这个过程我会把重点一一列举出来。
准备部分：我们需要一个基本的项目结构如下所示：
react之redux新手入门

其中index.js代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="root">

</div>
<script src="./public/bundle.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

而Counter.js代码片段如下：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

const reducers = (state = 0, action) => {
switch (action.type) {
case "ADD" : return state+1;
case "DECRESE": return state-1;
default: return state
    }
}

let store = createStore(reducers)
class Counter extends Component {
    render (){
return (
        <div>
            <p>{this.props.value}</p>
            <button onClick={this.props.onADD}>+</button>
            <button onClick={this.props.onDECRESE}>+</button>
        </div>
        )
    }
}

const render = () => {
    ReactDOM.render(<Counter 
        value={store.getState()}    
        onADD={()=>store.dispatch({type:"ADD"})} 
        onDECRESE={()=>store.dispatch({type:"DECRESE"})}
        />,document.getElementById("root"))
}
render();
store.subscribe(render);

index中的代码无需多说，如果不懂，可以学习react.js和webpack的知识，这个与redux没关系。

对于counter中的代码，我们只需要知道，一切的核心是操作store。

import { createStore } from ‘redux’
//这句话的意思是引入createStore，用来创建store，因为redux的核心就是状态管理，或者是数据管理，createStore的作用就是创建这样一个存储数据的容器。

所以应该有这样的一段代码：
let store = createStore(reducers);
//这段代码的意思就是，我创建了这样的一个容器了，现在还需要reducers这样的一个参数，这个参数是一个“对象”，类似于这样：createStore（{value：“123”}）。
这个“对象”在redux中是一个返回值为对象的函数（原因就是，我们的store中的内容是一个根据用户操作而变化的动态数据，而不是一成不变的。如果这里理解有困难，继续向下看。）

因为需要的是一个reducers这样的一个函数，所以代码中就定义这样的一个函数。
const reducers = (state = 0, action) => {
switch (action.type) {
case “ADD” : return state+1;
case “DECRESE”: return state-1;
default: return state
}
}
//这个函数是什么意思呢？就是我根据传入的参数类型的不同，我返回不同的结果。为什么要类型不同？因为我们需要描述用户不同的操作状态，我点击A代表我想进入A界面，我点击B代表我想进B界面。不同的点击代表了不同的状态，这符合了，redux中的一个理念—数据决定界面，只有数据变化了，界面就跟着变化了，而用户只能操作view，所以形成了redux的数据管理理念。

接下来我们需要理解两个函数
store.dispatch({type:”ADD”});
//这个代表了我进行了类型选择。代码中的意思就是，我点击了button按钮，执行了+操作，我给这个+操作定义的类型就是ADD，reducers函数中对ADD类型的操作就是return state+1；
我们需要注意的是每次在store.dispatch的时候,会自动调用store.subscribe()这个函数，这时候我们再次render，也就是store.subscribe(render);
由于之前dispatch的时候执行了state变化了，这时候render就会重新渲染界面。

秒客网

react之redux新手入门

相关文章