Is it possible to update the store outside of the Provider context in Redux?

Question

I have some configuration settings I want to set and save to redux store before my main app loads. This is so that all the children components already have the configuration data pre-loaded and they can read it from the store using redux-connect.

For now, I only know how to use and update the store inside my connected components that are wrapped in the Provider context.

Is there a way to update it outside of that?

For example:

class App extends React {
   constructor(props) {
      super(props);
      // UPDATE REDUX STORE HERE
   }

   componentDidUpdate() {
      // OR UPDATE REDUX STORE HERE
   }

   render() {
       return (
           <Provider store={store}>
              <Child />
           </Provider>
       );
   }
 }

Is this even possible?

Forget about React for a moment. Redux doesn't have anything to do with React (that's a special-purpose library; react-redux)! It's just Javascript. You need to read this: redux.js.org/api/api-reference — oligofren
– oligofren, Commented Jun 24, 2019 at 22:59

Mapsy · Accepted Answer · 2019-06-24 22:54:04Z

2

store is just an object which contains dispatch and getState functions. This means that wherever the store is accessible outside of the application, you can manipulate it using these attributes.

const store = configureStore();

const App = () => (<Provider store={store} />);

store.dispatch({ type: SOME_ACTION_TYPE });

answered Jun 24, 2019 at 22:54

Mapsy

4,2701 gold badge41 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DOUICHI Abdesselam · Accepted Answer · 2019-06-24 21:09:56Z

you can call the Provider outside of App Component in index.js

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>

    , document.getElementById('root'));

now in your App class it's possile add a connect or an updateAction

import {connect} from "react-redux";
import {updateStuf} from "./actions/projectActions";



class App extends Component {
    componentWillMount() {
        this.props.updateStuf();
    }

    render() {
        const {stuff} = this.props;
        return (
                <div className="stuff">

                </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        stuff: state.project.stuff
    }
}
export default connect(mapStateToProps, {updateStuf})(App);

Collectives™ on Stack Overflow

Is it possible to update the store outside of the Provider context in Redux?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related