我们为什么需要redux

1.1.1 redux是什么

通俗的来讲,redux就是一个state管理库

1.1.2 不使用redux构建应用

  1. 一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。然后这时候不通过DOM沟通(也就是React体制内)解决的唯一办法就是提升state,将state放到共有的父组件中来管理,再作为props分发回子组件。
  2. 子组件改变父组件state的办法只能是通过事件触发父组件声明好的回调,也就是父组件提前声明好函数或方法作为契约描述自己的state将如何变化,再将它同样作为属性交给子组件使用。这样就出现了一个模式:数据总是单向从顶层向下分发的,但是只有子组件回调在概念上可以回到state顶层影响数据。这样state一定程度上是响应式的。
  3. 为了面临所有可能的扩展问题,最容易想到的办法就是把所有state集中放到所有组件顶层,然后分发给所有组件。这样就造成了很多中间组件为了传递props而增加一些冗余的属性。
  4. 最重要的是父组件与子组件的通信,会造成数据的重复,带来的一个问题是如何保证数据重复的数据一致,如果数据存储多份而且不一致,就很难决定到底使用哪个数据作为正确结果了。
  5. 对于数据重复的问题,一致很直观的解决方法就是以某一个组件的状态为准,这个组件是状态的”领头羊”,其余组件都保持和”领头羊”的状态同步,但是实际情况下这种方法可能难以实施。
  6. 另一种思路是,干脆不要让任何一个react组件扮演”领头羊”角色,把数据源放在react组件之外形成全局状态。这便是redux的store,全局唯一的数据源。

1.1.3 redux为我们做了什么

image

1.1.4 按照redux思想来设计

redux真正的灵魂在其设计思想,很多时候我们可能并不需要redux库本身,我们可以尝试着来应用其思想.

例如:使用组件内state的计数器

import React, { Component } from 'react';

class Counter extends Component {
state = { value: 0 };

increment = () => {
this.setState(prevState => ({
value: prevState.value + 1
}));
};

decrement = () => {
this.setState(prevState => ({
value: prevState.value - 1
}));
};

render() {
return (
<div>{this.state.value}
<button>+</button>
<button>-</button></div>
)
}

应用redux思想的计数器

import React, { Component } from 'react';

const counter = (state = { value: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 };
case 'DECREMENT':
return { value: state.value - 1 };
default:
return state;
}
}

class Counter extends Component {
state = counter(undefined, {});

dispatch(action) {
this.setState(prevState => counter(prevState, action));
}

increment = () => {
this.dispatch({ type: 'INCREMENT' });
};

decrement = () => {
this.dispatch({ type: 'DECREMENT' });
};

render() {
return (
<div>{this.state.value}
<button>+</button>
<button>-</button></div>
)
}
}

1.1.5 用redux的好处

  1. 前端开发state可控。
  2. 前端数据结构统一管理。
  3. 数据流向单一,团队开发互相影响较小。

发表评论

电子邮件地址不会被公开。 必填项已用*标注