Как редукс работает с простым примером (независимо от реакции)?

Question

Я видел много редукционных примеров и знаю, что это для управления состоянием, но чем больше я читаю, тем более запутанным становится. кто-то может просто привести пример с редукцией для понимания цели, чтобы продемонстрировать, как это работает?

Answer 1

Прежде всего, давайте посмотрим точно, какова цель использования Redux;Redux - это что-то вроде концепции «состояния» в React с глобальным доменом операций .это означает, что когда мы используем redux, у нас есть одно огромное состояние с различными дочерними состояниями для использования во всех компонентах нашего приложения.

Это помогает нам уменьшить использование «реквизита» в нашем приложении и иметь легкий доступк данным в других компонентах и ​​множеству других спецификаций в приложениях со сложным потоком данных.

В Redux у нас есть три основных понятия: store (при условии, что это основное глобальное состояние), actions и redurs .каждый редуктор - это функция, которая возвращает объект (зависит от того, что мы хотим использовать действия) для реализации в нашем хранилище .

и действия наши обработчики (исполнительные органы) для внесения изменений в редукторы.в действительности, действия являются интерфейсами редукторов, в которые мы можем вносить изменения.

Существует множество способов диспетчеризации действий и использования избыточностив компоненте.но в качестве простого примера:

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
    }
}

redurs.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;
}

А затем, в качестве простого примера использования в реагирующем компоненте:

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 2

Как вы уже упоминали, вы прошли через редукс и знаете, для чего он создан, позвольте мне продемонстрировать его вам на очень простом примере с изоляцией без каких-либо рамок.

Простейший пример (о котором я думал)

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 , который является методом, отвечающим за изменение состояния в отношении действий, которые он получает.

и Абонент , который прослушивает изменение состояния.

Все, что нам нужно сделать, - это создать Store с вашим Reducer и Subscribe, чтобы сохранить шаблон наблюдателя .its, в котором наблюдается состояние изменений. и, наконец, попробуйте передать действия, отправив их для хранения после отправки, Редуктор вступает в действие и изменяет состояние, которое затем отслеживается Абонентом. :) это просто.