Subscribe to single property change in store in Redux

前端 未结 4 1808
情歌与酒
情歌与酒 2020-12-02 07:04

In Redux I can easily subscribe to store changes with

store.subscribe(() => my handler goes here)

But what if my store is full of differ

4条回答
  •  野趣味
    野趣味 (楼主)
    2020-12-02 07:28

    Created a hack to help understand the subscribers can be differentiated based on store data, with multiple store capability.

    //import { createStore } from 'redux';
    let createStore = require('redux').createStore;
    let combineReducers = require('redux').combineReducers;
    /**
     * This is a reducer, a pure function with (state, action) => state signature.
     * It describes how an action transforms the state into the next state.
     *
     * The shape of the state is up to you: it can be a primitive, an array, an object,
     * or even an Immutable.js data structure. The only important part is that you should
     * not mutate the state object, but return a new object if the state changes.
     *
     * In this example, we use a `switch` statement and strings, but you can use a helper that
     * follows a different convention (such as function maps) if it makes sense for your
     * project.
     */
    function counter(state = 0, action) {
        switch (action.type) {
            case 'INCREMENT':
                return state + 1
            case 'DECREMENT':
                return state - 1
            default:
                return state
        }
    }
    
    function messanger(state = 'Mr, khazi', action) {
        switch(action.type) {
            case 'WELCOME':
                return 'Hello, Mr Khazi';
            case 'BYE':
                return 'Bye, Mr Khazi';
            case 'INCREMENT':
                return 'Incremented khazi';
            default:
                return state;
        }
    };
    
    function latestAction(state = null, action) {
        switch(action.type) {
            case 'WELCOME':
                return '$messanger';
            case 'BYE':
                return '$messanger';
            case 'INCREMENT':
                return '$messanger, $counter';
            case 'DECREMENT':
                return '$counter';
            default:
                return state;
        }
    };
    
    let reducers = {
        counts: counter,
        message: messanger,
        action: latestAction
    };
    
    let store = createStore(
        combineReducers(reducers, latestAction)
    );
      
    // Create a Redux store holding the state of your app.
    // Its API is { subscribe, dispatch, getState }.
    //let store = createStore(counter)
    
    // You can use subscribe() to update the UI in response to state changes.
    // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
    // However it can also be handy to persist the current state in the localStorage.
    store.subscribe(() => {
        if(store.getState().action.indexOf('messanger') !== -1) {
            console.log('subscribed for counter actions', store.getState());
        }
    });
    
    store.subscribe(() => {
        if (store.getState().action.indexOf('counter') !== -1) {
            console.log('subscribed for messanger actions', store.getState());
        }
    });
    
    // The only way to mutate the internal state is to dispatch an action.
    // The actions can be serialized, logged or stored and later replayed.
    console.log('----------------Action with both subscriber-------------');
    store.dispatch({ type: 'INCREMENT' });
    console.log('---------------Action with counter subscriber-----------');
    store.dispatch({ type: 'DECREMENT' });
    console.log('---------------Action with messenger subscriber---------');
    store.dispatch({ type: 'WELCOME' });
    
    /*
        every reducer will execute on each action.
    
    */
    

提交回复
热议问题