Redux and React-redux 莞式教程（新手必看）

时间  2019-11-08
标签 redux react 教程 新手 栏目 React 繁體版
原文   原文链接

为了方便使用者使用，这里就redux和react-redux 一并讲究使用了，会了react-redux，redux也就没问题了，只不过稍微封装了一下前端

教程方式

  1. 咱们先讲理论，先明白 render、action、 store 、connect 、 dispatch 、{ mapStateToProps mapDispatchToProps },是什么东西。node

  2. 看完你可能有点懵，不要紧我有个简单直接的涨工资的dom，跟着作一遍你就懂了react

先 download 莞式教程 github.com/Chad97/My-n… —— 看了它你就一目了然了git

1、

  • 介绍 （有必定了解的本身跳 二 开始个人莞式教程）

对于大型的复杂应用来讲，这两方面偏偏是最关键的。所以，只用 React 无法写大型应用。 为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引起了不少的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一块儿，很短期内就成为了最热门的前端架构。es6

首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数状况，你能够不用它，只用 React 就够了。 曾经有人说过这样一句话。 "若是你不知道是否须要 Redux，那就是不须要它。" —— Redux 的创造者 Dan Abramovgithub

简单说，若是你的UI层很是简单，没有不少互动，Redux 就是没必要要的，用了反而增长复杂性。 用户的使用方式很是简单 用户之间没有协做 不须要与服务器大量交互，也没有使用 WebSocket 视图层（View）只从单一来源获取数据编程

Store

Store 就是保存数据的地方，你能够把它当作一个容器。整个应用只能有一个 Store。 Redux 提供createStore这个函数，用来生成 Store。redux

import { createStore } from 'redux';
const store = createStore(fn);
复制代码

Action

State 的变化，会致使 View 的变化。可是，用户接触不到 State，只能接触到 View。因此，State 的变化必须是 View 致使的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。数组

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其余属性能够自由设置，社区有一个规范能够参考。服务器

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};
复制代码

上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。 能够这样理解，Action 描述当前发生的事情。改变 State 的惟一办法，就是使用 Action。它会运送数据到 Store。

Action Creator

View 要发送多少种消息，就会有多少种 Action。若是都手写，会很麻烦。能够定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
复制代码

const action = addTodo('Learn Redux'); 上面代码中，addTodo函数就是一个 Action Creator。

store.dispatch()

store.dispatch()是 View 发出 Action 的惟一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});
复制代码

上面代码中，store.dispatch接受一个 Action 对象做为参数，将它发送出去。 结合 Action Creator，这段代码能够改写以下。

store.dispatch(addTodo('Learn Redux'));

Reducer

Store 收到 Action 之后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫作 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 做为参数，返回一个新的 State。

const reducer = function (state, action) {
  // ...
  return new_state;
};
复制代码

整个应用的初始状态，能够做为 State 的默认值。下面是一个实际的例子。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});
复制代码

上面代码中，reducer函数收到名为ADD的 Action 之后，就返回一个新的 State，做为加法的计算结果。其余运算的逻辑（好比减法），也能够根据 Action 的不一样来实现。

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 须要知道 Reducer 函数，作法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux';
const store = createStore(reducer);
复制代码

上面代码中，createStore接受 Reducer 做为参数，生成一个新的 Store。之后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，获得新的 State。

为何这个函数叫作 Reducer 呢？由于它能够做为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序做为一个数组。

const actions = [
  { type: 'ADD', payload: 0 },
  { type: 'ADD', payload: 1 },
  { type: 'ADD', payload: 2 }
];
复制代码

const total = actions.reduce(reducer, 0); // 3 上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数做为参数，就能够直接获得最终的状态3。

store.subscribe()

Store 容许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
复制代码

显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

store.subscribe方法返回一个函数，调用这个函数就能够解除监听。

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();
复制代码

Store 的实现

上一节介绍了 Redux 涉及的基本概念，能够发现 Store 提供了三个方法。

store.getState()
store.dispatch()
store.subscribe()
复制代码

import { createStore } from 'redux'; let { subscribe, dispatch, getState } = createStore(reducer); createStore方法还能够接受第二个参数，表示 State 的最初状态。这一般是服务器给出的。

let store = createStore(todoApp, window.STATE_FROM_SERVER) 上面代码中，window.STATE_FROM_SERVER就是整个应用的状态初始值。注意，若是提供了这个参数，它会覆盖 Reducer 函数的默认初始值。

下面是createStore方法的一个简单实现，能够了解一下 Store 是怎么生成的。

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

  dispatch({});

  return { getState, dispatch, subscribe };
};
复制代码

redux flow

  • 放一个简单的计数器案例
const Counter = ({ value, onIncrement, onDecrement }) => (
  <div> <h1>{value}</h1> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> </div>
);

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

const store = createStore(reducer);

const render = () => {
  ReactDOM.render(
    <Counter value={store.getState()} onIncrement={() => store.dispatch({type: 'INCREMENT'})} onDecrement={() => store.dispatch({type: 'DECREMENT'})} />, document.getElementById('root') ); }; render(); store.subscribe(render); 复制代码

2、

先 download 莞式教程 github.com/Chad97/My-n… —— 看了它你就一目了然了

这一章 咱们简单的讲一下 react-redux ，就开始个人莞试教程

咱们的react-redux 为方便咱们使用，内置了几个组件，很是简单，很是好用 —— connect() mapStateToProps mapDispatchToProps <Provider></Provider>

  • 好下面让咱们来单刀直入~

reacr-redux 之涨工资

npx redux-dom 新建一个react项目 低版本 nodejs 用create-app也能够

  • 在src文件夹下面建立一个 store ，store里面建立一个reducer.js 以下：
import React from 'react';
import { connect } from 'react-redux';


const tiger = 30000//建立工资state

//这是action
const increase = {
    type: '涨工资'
}
const decrease = {
    type: '扣工资'
}

const  taxes = {
    type: '缴税'
}

//这是reducer
 const reducer = (state = tiger, action) => {
    switch (action.type) {
        case '涨工资':
            return state += 100;
        case '扣工资':
            return state -= 100;
        case '缴税' :
        return state - ((state - 5000) *  0.01)
        default:
            return state;
    }
}

export default reducer
复制代码

而后进入咱们的 index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from './store/reducer'





//建立store
const store = createStore(reducer);



ReactDOM.render(
    <Provider store={store}> <App /> </Provider>,
    document.getElementById('root')
)
复制代码
  • 讲一下 Provider 这个组件，他是react-redux 中提供的一个组件

connect方法生成容器组件之后，须要让容器组件拿到state对象，才能生成 UI 组件的参数。 一种解决方法是将state对象做为参数，传入容器组件。可是，这样作比较麻烦，尤为是容器组件可能在很深的层级，一级级将state传下去就很麻烦。 React-Redux 提供Provider组件，可让容器组件拿到state

记住 他就是 经过 class 的connect 实现的，能让Provider 的组件的子孙组件都拿到挂载的store，莞式教程简单粗暴，要看实现原理 去看es6去

好了如今让我去app.js里面，去实现涨工资吧 哈哈~~~

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Home from './components/Home'

class App extends Component {

  componentDidMount () {
    // console.log(this.props)
  }

  render() {
    const { PayIncrease, PayDecrease } = this.props
    return (

      <div className="App"> <h2>当月工资为{this.props.tiger}</h2> <button onClick={PayIncrease}>升职加薪</button> <button onClick={PayDecrease}>迟到罚款</button> <Home /> </div>

      

    );
  }
}

//须要渲染什么数据
function mapStateToProps(state) {
  return {
      tiger: state
  }
}
//须要触发什么行为
function mapDispatchToProps(dispatch) {
  return {
      PayIncrease: () => dispatch({ type: '涨工资' }),
      PayDecrease: () => dispatch({ type: '扣工资' })
  }
}

export default App = connect(mapStateToProps, mapDispatchToProps)(App)

复制代码

  • connect

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

记住，要想让组件拿到store 就得用 connect （） 这个方法 来连接，你能够理解架桥，别想太多，简单粗暴 用多了你就知道原理了。

打印工资

好如今让我在 src/components 羡慕新建一个 Home.jsx 组件 ,涨完工资是否是要打印工资

import React from 'react';
import { connect } from 'react-redux'
import Counter from './Counter '

class Home extends React.Component {
    constructor (props, context){
        super() 
        this.state = {
            
        }
    }
    

    mycl = () => {
        alert(this.props.tiger)
    } 

    render() {
    
        return (
            <div> <hr /> <br /> <h1>home 组件</h1> <button onClick= {this.mycl}>打印目前工资</button> <hr /> <br /> <Counter /> </div>
        );
    }

    componentDidMount () {
        console.log(this.props)
    }

}


//须要渲染什么数据
function mapStateToProps(state) {
    return {
        tiger: state
    }
  }
  //须要触发什么行为
  function mapDispatchToProps(dispatch) {
    return {
        PayIncrease: () => dispatch({ type: '涨工资' }),
        PayDecrease: () => dispatch({ type: '扣工资' })
    }
  }

export default connect(mapStateToProps, mapDispatchToProps)(Home)
复制代码

缴税

涨完工资，工资那么高是否是要缴税拉~~

import React from 'react';
import { connect } from 'react-redux';

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 

         };
    }
    render() {
        const { Paytaxes } = this.props
        return (
            <div> <h2>税后计算</h2> <button onClick={ Paytaxes } >缴税</button> <p>{this.props.tiger}</p> </div>
        );
    }
}

//须要渲染什么数据
function mapStateToProps(state) {
    return {
        tiger: state
    }
  }
  //须要触发什么行为
  function mapDispatchToProps(dispatch) {
    return {
        PayIncrease: () => dispatch({ type: '涨工资' }),
        PayDecrease: () => dispatch({ type: '扣工资' }),
        Paytaxes: () => dispatch({ type: '缴税' }),
    }
  }

export default connect(mapStateToProps, mapDispatchToProps)(Counter)
复制代码

完

莞式教程，作完就走~~ 手动 /斜眼

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程