其他分享
首页 > 其他分享> > ♠ redux、react-redux的使用

♠ redux、react-redux的使用

作者：互联网

redux的使用

JavaScript纯函数

函数式编程中有一个概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；

纯函数的维基百科定义：

 

在程序设计中，若一个函数符合一下条件，那么这个函数被称为纯函数：

当然上面的定义会过于的晦涩，所以我简单总结一下：

案例一：

很明显，下面的函数是一个纯函数；它的输出是依赖我们的输入内容，并且中间没有产生任何副作用；

案例二：

add函数不是一个纯函数；函数依赖一个外部的变量，变量发生改变时，会影响：确定的输入，产生确定的输出；能否改进成纯函数呢？ const foo = 5; 即可

React中的纯函数

为什么纯函数在函数式编程中非常重要呢？

React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改，在redux中，reducer也被要求是一个纯函数。

为什么需要redux

JavaScript开发的应用程序，已经变得越来越复杂了：

管理不断变化的state是非常困难的：

React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理：

Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理；Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）

Redux - Store／action／reducer

Redux的核心理念非常简单。

比如我们有一个朋友列表需要管理：

整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化；

Redux要求我们通过action来更新数据：

比如下面就是几个更新friends的action：

强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的；当然，目前我们的action是固定的对象，真实应用中，我们会通过函数来定义，返回一个action；

但是如何将state和action联系在一起呢？答案就是reducer, reducer是一个纯函数；reducer做的事情就是将传入的state和action结合起来生成一个新的state；

Redux的三大原则

单一数据源

State是只读的

使用纯函数来执行修改

Redux的使用

安装redux：

npm install redux --save或yarn add redux

1.创建一个新的项目文件夹：XXX

2.创建src目录，并且创建index.js文件

3.修改package.json可以执行index.js

"scripts": {

"start": "node src/index.js"

}

Redux的使用过程

1.创建一个对象，作为我们要保存的状态：

2.创建Store来存储这个state

3.通过action来修改state

4.修改reducer中的处理代码

5.可以在派发action之前，监听store的变化

查看代码 
// 1.导入redux(不能通过ES6的方式)

// import/export 13.2.0开始支持

// commonjs一种实现 -> nodejs
const redux = require('redux');

const initialState = {
  counter: 0
}

// reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, counter: state.counter + 1 }
    case "DECREMENT":
      return { ...state, counter: state.counter - 1 }
    case "ADD_NUMBER":
      return { ...state, counter: state.counter + action.num }
    case "SUB_NUMBER":
      return { ...state, counter: state.counter - action.num }
    default:
      return state;
  }
}

// store(创建的时候需要传入一个reducer)
const store = redux.createStore(reducer)

// 订阅store的修改
store.subscribe(() => {
  console.log("counter:", store.getState().counter);
})

// actions
const action1 = { type: "INCREMENT" };
const action2 = { type: "DECREMENT" };

const action3 = { type: "ADD_NUMBER", num: 5 };
const action4 = { type: "SUB_NUMBER", num: 12 };

// 派发action
store.dispatch(action1);
store.dispatch(action2);
store.dispatch(action2);
store.dispatch(action3);
store.dispatch(action4);

Redux结构划分

如果我们将所有的逻辑代码写到一起，那么当redux变得复杂时代码就难以维护。

p 接下来，我会对代码进行拆分，将store、reducer、action、constants拆分成一个个文件。

查看代码 
//index.js
import redux from 'redux';

import reducer from './reducer.js';

const store = redux.createStore(reducer);

export default store;
查看代码 
//reducer.js
import {
  ADD_NUMBER,
  SUB_NUMBER,
  INCREMENT,
  DECREMENT
} from './constants.js';

const defaultState = {
  counter: 0
}

function reducer(state = defaultState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num };
    case INCREMENT:
      return { ...state, counter: state.counter + 1 };
    case DECREMENT:
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
}

export default reducer;
查看代码 
//constants.js
export const ADD_NUMBER = "ADD_NUMBER";
export const SUB_NUMBER = "SUB_NUMBER";
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
查看代码 
import {
  ADD_NUMBER,
  SUB_NUMBER,
  INCREMENT,
  DECREMENT
} from './constants.js';

// export function addAction(num) {
//   return {
//     type: "ADD_NUMBER",
//     num
//   }
// }

// export const addAction = (num) => {
//   return {
//     type: "ADD_NUMBER",
//     num
//   }
// }

export const addAction = num => ({
  type: ADD_NUMBER,
  num
});

export const subAction = num => ({
  type: SUB_NUMBER,
  num
});

export const incAction = () => ({
  type: INCREMENT
});

export const decAction = () => ({
  type: DECREMENT
});

注意：node中对ES6模块化的支持

注意：导入文件时，需要跟上.js后缀名；

 

标签：counter,const,reducer,react,state,使用,action,redux,store
来源： https://www.cnblogs.com/sunflower-js/p/15861408.html