Question

我看过很多redux示例，并且知道它用于状态管理，但是我读得越多，它就会变得越混乱。有人可以简单地使用redux示例来理解目的以演示其工作原理吗？

Answer 1

正如您所提到的，您已经遍历了redux，并了解了它的作用，让我通过一个非常简单的示例，在没有任何框架的情况下向您展示它。

最简单的示例（我想到了）

const {createStore} = require('redux');

const initialState = {
    name : "faisal"
}
const mReducer = (state = initialState,action)=>{
    const newState = {...state};
    if(action.type==="QAIS"){
        newState.name = "Qais";
    }

    if(action.type==="AZHAR"){
        newState.name = "Azhar";
    }
    return newState;
};

const mSubscriber = ()=>{
    console.log("Name : "+store.getState().name);
}

const store = createStore(mReducer);
store.subscribe(mSubscriber);
store.dispatch({type:"QAIS"});
store.dispatch({type:"AZHAR"});
store.dispatch({type:"ASAD"});

从示例中您可以看到，一个简单的商店拥有 Reducer ，这是负责根据收到的操作来改变状态的方法。

和 Subscriber 来监听状态更改。

我们要做的就是用您的Reducer创建createStore并订阅以存储.its观察者模式，其中观察到更改状态。并最终尝试通过调度传递动作来存储它们，一旦它们被调度，Reducer就会生效并修改状态，然后订阅服务器将其观察。 :)很简单。

Answer 2

首先，让我们确切地了解使用Redux的目的。 Redux类似于React with global operation domain 中的“状态”概念。这就是说，当我们使用redux时，我们只有一个巨大的状态，并且在所有应用程序组件中都可以使用各种子状态。

它有助于我们减少应用程序中“道具”的使用，并易于访问其他组件中的数据以及具有复杂数据流的应用程序中的许多其他规范。

在Redux中，我们有三个主要概念：商店（提供主要的全局状态），动作和还原器。每个 reducer 是一个函数，该函数返回要在我们的 store 中实现的对象（取决于我们要使用操作的内容）。

和 actions 是我们的处理程序（执行臂），用于对化简器进行更改。实际上，动作是减速器的接口，我们可以对其进行更改。

有很多方法可以在组件中分派操作和使用redux。但是，举一个简单的例子：

actions.js：

export var editUserStatus = (status) => {
    return {
        type: 'EDIT_USER_STATUS',
        status: status
    }
}

export var addAUserToUsers = (user) => {
    return {
        type: 'ADD_A_USER_TO_USERS',
        user: user
    }
}

reducers.js：

export var usersReducer = (state = { status: 'loading'}, action) => {
    switch (action.type) {
        case 'EDIT_USER_STATUS':
            return {
                ...state,
                status: action.status
            }
        case 'ADD_A_USER_TO_USERS':
            return {
                ...state,
                users: state.users.concat(action.user)
            }
        default:
            return state
    }
}

store.js：

import { createStore, applyMiddleware, compose } from 'redux';
var thunk = require('redux-thunk').default;    
import {usersReducer} from './usersReducer';
import { combineReducers } from 'redux';

var combinedReducers = combineReducers(usersReducer)

export var config = (initialState = {}) => {
    var store = createStore(
        combinedReducers,
        initialState,
        compose(
            applyMiddleware(thunk)
        )
    );
    return store;
}

然后，作为一个简单的示例，在react组件中使用：

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actions from 'actions'


class myExampleComponent extends Component {

    componentDidMount(){
        this.props.actions.editUserStatus('loaded')
    }

    render() {
        return (<p>{this.props.usersReducer.status}</p>)
    }

}


function mapStateToProps(state, ownProps) {
    return {
         usersReducer: state.usersReducer
    }
}

function MapDispatchToProps(dispatch) {
    return { actions: bindActionCreators(actions, dispatch) }
}

export default connect(
    mapStateToProps,
    MapDispatchToProps
)(myExampleComponent)

Answer 3

当用户在视图部分执行操作时当他打开页面或应用程序时遇到有效载荷 (load) 这个 action 被分派到 store。
换句话说，由于调度，数据被传输到商店它现在将数据传送给减速器。
动作只是告诉他们发送的有效载荷数据是什么。他们是这样不知道应用程序将如何更改数据以及要做什么。
此时，reducer 确定应用程序的状态如何将根据来店的动作而变化并发送去商店。

<块引用>

简而言之，reducer 只负责数据交换和更新店铺。然后，商店将此更新反映到视图中。

redux如何通过一个简单的示例工作（与反应无关）？

3 个答案: