简单实现redux+react

安装:

npm install --save redux

redux是所有语言都可以使用的,并不是只有react可以使用
有专门的react-redux
与react的绑定库和开发者工具

npm install --save react-redux
npm install --save-dev redux-devtools

redux的三大原则

一、单一数据源,整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
二、State 是只读的,唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
三、为了描述 action 如何改变 state tree ,你需要编写 reducers。
在这里插入图片描述

使用场景

关于redux :如果你的UI层非常简单,没有很多互动, Redux就是不必要的,用了反而增加复杂性,下面描述了需要redux的情景
●用户的使用方式复杂
●不同身份的用户有不同的使用方式(比如普通用户和管理员)
●多个用户之间可以协作
●与服务器大量交互 ,或者使用了WebSocket
●View要从多 个来源获取数据
在这里插入图片描述

如何简单创建并使用redux

文件目录

  • |–src
    • |–action
      • |–Action.js //ActionCreater 触发事件
      • |–ActionType.js //触发名称
    • |–reducers
      • |–reducers.js
    • |–其他组件

介绍action的使用:
先明白Action的概念
State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。
Action是一个对象,其中type是触发名称,是必须的属性,其他属性可以自由设置。

const action={
    type:'ADD',
    payload:'添加信息'
}

其中Action 的名称是ADD,它携带的信息是字符串’添加信息’。
1.ActionType.js
将触发名称封装在变量中,这样可以防止在后期调用时单词写错

export const  INCREASE='INCREASE_MESSAGE'//添加留言
export const  INITMESSAGE='INIT_MESSAGE'//初始化

export const ADD='ADD_RETURN';//添加回复
export const  INITRETURN='INIT_RETURN'//初始化

2.Action.js可以为一个action创造器
View 要发送多少种消息,就会有多少种 Action。如果都手写,会很麻烦。可以定义一个函数来生成 Action,这个函数就叫 Action Creator。

const ActionType=require('./ActionType');
//Action触发的名称

module.exports={
    Increase(data){
        return {
            type:ActionType.INCREASE,
            //触发名称为INCREASE
            payload:data
            //传输的数据
        }
    }
}

3.reducers.js
Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

import {INCREASE , ADD , INITMESSAGE , INITRETURN} from "../action/ActionType";
//定义初始状态
const initState={
    comment:[],
    returns:[],
}

const changeValue=(state=initState,action)=>{
    //state=initState将初始状态赋值给state
switch(action.type){
    //当action.type的触发名称为INCREASE会将action.data的值和原有的数据进行合并
    case INCREASE:
        return {...state,comment:[...state.comment,action.data]};
        //返回新的state
    case ADD:
        return {...state,returns:[...state.returns,action.data]};
    case INITRETURN:
        return {...state.returns,returns:action.data};
    case INITMESSAGE:
        return {...state.comment,comment:action.data};
    default:return state;
}
}

export default changeValue;

4.在组件中调用方法实现redux state状态的更改:
在页面中我们可以使用store.dispatch来进行触发reducer的自执行,所以在页面中,我们的store需要知道reducer函数,所以需要将Reducer传入createStore

//导入Action名称
import {ADD, INITRETURN} from "../action/ActionType";
//导入reducers
import changeValue from "../reducers/reducers";
import {createStore} from 'redux'
//导入ActionCreater
import {Increase} from './action/Action'
//将reducer函数传入createStore
var store = createStore(changeValue)

//当我们有ActionCreater时,我们可以直接引用
//在Action里面对输数据进行处理变为
//{type:ActionType.INCREASE, payload:data }返回给reducer     
store.dispatch(Increase(obj))

//没有ActionCreater时,把对象传到reducer中,让他自动判断
store.dispatch({type: ADD, data: obj})

5.结合state状态机使用

constructor() {
    //状态机,管理当前组件的数据
    super();
    this.state = {
        commentList: store.getState().comment,
    };
}

addComment(obj) {
    store.dispatch({type: INCREASE, data: obj})
    this.setState({
        commentList: store.getState().comment
    })
}
展开阅读全文

React Hooks 案例详解(React 进阶必备)

03-13
前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值