redux简朴运用

2024年3月19日 177次阅读 来源: Jokcy

在react炽热的年代，flux作为fb提出的最适合react的数据模型，时下有异常多的完成。
而redux作为在浩瀚的flux地完成中脱颖而出，及其精简的代码，却能带来有用的功用，恰好自身的项目中要用，所以让我们来剖析redux

为何要写这个文档呢，由于我看官方文档种种看不懂啊，琢磨了半天都不邃晓，末了是去看了源码才看邃晓
由于他的一些观点没搞清楚的话，就不晓得他的文档在说什么。为了不让更多的人掉坑内里，这里轻微诠释一些观点。

进修redux须要晓得redux的三个部份：

  1. action

  2. reducer

  3. store

action

redux中得action就是你自身定义的一个行动，什么是行动？你能够邃晓为用户的行动你做出的回响反映，最简朴地例子就是当你举行分页的时刻，
跳到特定的页数这个行动。我们能够经由过程相似以下的代码定义action：

/*
 * action types
 */
 
export const ADD_TODO = 'ADD_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
};

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

export function completeTodo(index) {
  return { type: COMPLETE_TODO, index };
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter };
}

在这里定义action今后用来动身的，经由过程dispatch要领来触发行动，在这里action只是一些常亮的定义。
dispatch要领吸收的参数是一个object，而且object必需包括一个type属性，通知我们须要实行的操纵。
而对象内里的包括的其他属性则能够在实行行动的时刻用作其他用处。

dispatch要领是会在store衔接组件的时刻跟着组件的props通报到各个组件的，所以组件内都是能够用的。

reducer

这是在redux内里提出来的观点，细致啥寄义请参考官网，由于我也诠释不清楚╮(╯▽╰)╭

reducer在这里是中心，由于redux是只要一个store的，所以全部app的状况和数据都存储在一个store内里，
假如一切状况变化都在store内里举行逻辑操纵，那末这个store一定是没法保护的，所以在这里我们把状况的变化放到了reducer内里。
我们先来看一下怎样定义一个reducer：

import { combineReducers } from 'redux';
import { ADD_TODO, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions';
const { SHOW_ALL } = VisibilityFilters;

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return action.filter;
  default:
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

const todoApp = combineReducers({
  visibilityFilter,
  todos
});

export default todoApp;

如你所见，reducer只是一个要领，在reducer内里依据传入的action内里的type举行差别的state地操纵。
在这里必需邃晓一点，在你挪用dispatch要领的时刻传入的action行动就是reducer内里接收的action

在这里我们唯一用到redux的功用只要combineReducers要领，这个要领的作用是把差别的reducer合并到一同，
由于在建立store的时刻我们只能传入一个reducer，然则我们不可能把一切逻辑操纵写到一个reducer内里，所以这边供应了这个要领。

store

store的作用等于整合一切的reducer，然后供应一些协助要领，比方dispatch等要领让我们运用，
代码以下：

let store = createStore(reducer);

是的，就是这么简朴。

怎样跟react一同运用

请参考文档
这边并不举行细致解说，认为这不是这篇文章的重点，今后会单独在其他文章中举行解说。

邃晓

怎样邃晓redux的重点就在于，redux怎样处置惩罚全部数据流的走向。
基本的思绪以下：

component --dispatch(action)--> reducer --update(state)--> store --update(props)--> component

这就是全部数据的走向

看到这里，你们一定跟我有雷同的主意：reducer究竟是个什么东西！

那末我们就来邃晓一下

我们看一下reducer的定义：

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

起首他接收两个参数，一个是state，一个是action。

action我们晓得是在dispatch的时刻传入的通知我们举行什么操纵的，那末state是什么？
state就是store内里存着的状况，即数据。我们能够看到每一个reducer都邑返回state，而这些state终究都邑保存在store内里。

**每次触发一个action的时刻，store挪用reducer，同时传入自身保存着的state，reducer依据传入的state和action返回新的state，
store更新state，返回以props的体式格局传入组件，这就形成了全部数据流轮回**

以上是redux的最基本运用，这也是redux的中心，然后背面另有一堆redux的扩大以及中间件举行进修，这仅仅是一个最先，今后另有更长的路要走^_^

    原文作者：Jokcy
    原文地址: https://segmentfault.com/a/1190000004611579
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞