Java教程

Redux 入门学习(1)

本文主要是介绍Redux 入门学习(1),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Redux学习笔记

redux 和react没有必然关系,redux可以应用于各种框架,包括jquery,甚至js都可以使用redux,只不过redux和react更加搭配。redux也推出了专门应用于react的react-redux。

1. Redux概述
  • Redux就是一个JavaScript容器,用来进行全局的状态管理
  • Redux三大核心
    • 单一数据源头(所有的state的数据都存储在一个Object Tree中)
    • State只读(要想修改只能通过发送action来进行修改)
    • 使用纯函数来进行修改(使用纯函数可以提高复用性,reduce就是一个纯函数,用来接收action )
2. Redux组成
  • State状态
    • DomainState :服务器返回的State
    • UI State: 关于当前组件的State
    • APP State: 全局State
  • Action事件
    • 本质就是一个JS对象
    • 必须包含type属性
    • 只描述了有事情发生,并没有描述如何去更新State
  • Reducer
    • 本质就是函数
    • 响应发送过来的action
    • 函数接收两个参数,第一个是初始化state,第二个是发送过来的action
  • Store
    • 用来吧action和reducer关联到一起的
    • 通过createStore 来构建store
    • 通过subscribe 来注册监听
    • 通过dispatch来发送action
3.Redux 入门案例
数据流转

就是通过store.dispatch 来进行更新store中的数据,然后会按照reducer方法中的处理逻辑来更新store的数据,组件会通过store.subscriber监听来获取更新的数据,可以通过setState等方法来更新数据进而重新更新组件

简单步骤
  1. 构建action对象,通过创建一个函数,来返回一个对象,返回的action对象需要有type属性,否则会报错。

    action.js

    export const sendAction = (action)=>{
        return{
            type: "sendAction",
            ...action
        }
    }
    
  2. 构建reducer,用来响应action,然后通过action的type值来进行单独的数据处理并将数据return 给store。

    reducer.js

    const initState = {value: "这是sate默认值"};
    
    export const reducer = (state = initState, action ) => {
        console.log("reducer",state,action)
        switch (action.type) {
            case "sendAction":
                return Object.assign({},state,action);
    
            default :
                return state;
        }
    }
    
    
  3. 构建store,通过redux中的createRedux来创建store,createStore需要传进 构建的reducer函数,这样就会按照定义的reducer函数的处理逻辑来处理数据。

    store.js

    import {createStore} from "redux";
    
    import {reducer} from "./reducer";//自定义的reducer函数
    
    export const store = createStore(reducer);
    
  4. 利用store.subscriber()来注册监听,接收store更新后的数据。

    home/index.js

    store.subscribe(() => {
                console.log("subscribe",store.getState())
            })
    
  5. 当利用store.dispatch来发送一个action的时候,就能触发监听了,在监听中通过store.getState()就可以拿到更新后的值了。

    home/index.jsx

    import React, {Component} from 'react';
    import {sendAction} from "../action";
    import {store} from "../store";
    
    class Home extends Component {
        constructor(props){
            super(props);
            this.state = {
                actionValue: "",
            };
    
        }
        componentDidMount() {
            //接收store更新的数据
            store.subscribe(() => {
                console.log("subscribe",store.getState());
                this.setState({actionValue: store.getState().value});
            })
        }
        // 发送action
        handleAction = () =>{
            const action = sendAction({value:"这是一个action"});
            store.dispatch(action);
        }
        render() {
            return (
                <div>
                    <button onClick={this.handleAction}>发送一个action</button>
                    <div>
                        <h4>这是action的值: {this.state.actionValue}</h4>
                    </div>
                </div>
            );
        }
    }
    
    export default Home;
    
这篇关于Redux 入门学习(1)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!