我该如何外包使用state的函数并执行setState

Question

I have a class which has many functions, i wish to outsource these functions and put each group of function inside a file of their own and then use them by importing and calling them.
Usually this is very simple, you simply put the function bodies inside another file and then export them, but in my case i use this.state and this.setState , is it still possible to outsource these function? if not, is there a better practice?
Thank you.

Answer 1

I just knocked this up real quick with no testing whatsoever, tell me if this is kinda what you were looking for?

window._stateManager = new StateManager();

class X extends React.Component {
    constructor(props) {
        super(props);

        _stateManager.addStateFunction(this.setState.bind(this));
    }
}


class StateManager() {
    constructor() {
        this.stateFunctions = [];
    }

    addStateFunction(ss) {
        this.stateFunctions.push(ss);
    }

    updateStates(obj) {
        this.stateFunctions.forEach(ss => {
            ss((state => {
                // here you have access to "this.state" as state
                return Object.assign({}, state, obj);
                // whatever you return from this function changes the state of the react component
            }))
        })
    }
}

Answer 2

Why you want to update the state by the function that doesn't belong to your component or child component. It doesn't make sense. You want to use redux there will be a single source of state of your entire App stored in the store. All your state update logic will be separated in reducer and you would have access to action creator that can update your App's state.