How do I get Redux state before the component re-renders? - reactjs

Question

Due to how data flows through React-Redux apps, data that is updated in the store is not available in a React component until that component re-renders.
My ask is, within a given component I'd like to use the updated store without re-rendering the component. I am looking to do something like this:
import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as AActions from "../aactions";
import * as BActions from "../bactions";
import * as CActions from "../cactions";
class MyComponent extends Component<Props>{
constructor(props){
super(props);
this.func = this.func.bind(this);
};
func(){
// Add item to A
this.props.addAItem("value");
// Get id of newly added item in A
let addedA = this.props.A.find(a => a.name === "value");
// Insert new items in B with the id of A
this.props.addBItem(addedA.id, "valueB");
// etc...
}
render(){
<div onClick={() => this.func()}>click me</div>
}
}
function mapStateToProps(state, props){
return {
A: state.A,
B: state.B,
C: state.C
};
}
function mapDispatchToProps(dispatch){
return bindActionCreators({...AActions, ...BActions, ...CActions}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
This doesn't work, because props is not updated until MyComponent re-renders. I cannot call this.props.A.find(a => a.name === "value"); because props will not have the most recently-added "A" value. In my case, I can't wait for MyComponent to re-render. What are my options to access the most-recent state in MyComponent?
I've done something like this but it's absolutely horrible but it works...
func(){
if (this.props.step1){
// Add item to A
this.props.addAItem("value");
this.props.setStep2();
} else if (this.props.step2) {
// Get id of newly added item in A
let addedA = this.props.A.find(a => a.name === "value");
this.props.setStep3();
}
// etc...
}

Answer 1

Ok if I understand your question correctly, your func method addItemA then addItemB is dependant on the response from addItemA, addItemA would be an async operation, So in your addItemA action when you add the item you can simply return promise from your action which when resolves returns the id of newly created element and inside your component you can handle in a then block as
func(){
// Add item to A
this.props.addAItem("value").then((id) => {
// no need to find the id now
// Insert new items in B with the id of A
this.props.addBItem(id, "valueB");
});
// etc...
}
Hope it helps

Answer 2

Do to a lot of back and forth, and testing, I ran into many walls trying to figure this one out but eventually figured it out. Here's what you need to do.
Note: This is not considered part of the React Redux public API, and may break without notice. We do recognize that the community has use cases where this is necessary, and will try to make it possible for users to build additional functionality on top of React Redux, but our specific use of context is considered an implementation detail. If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss possible API improvements. - https://react-redux.js.org/using-react-redux/accessing-store#using-reactreduxcontext-directly
Ensure your react package is 16.8.3 or later. Ensure your react-redux package is 7.1 or greater. You need these versions because of the new way (in React 16.8.3) React passes down Context to child components. We care about Context because this new React Context API is how the ReactReduxContext works.
The ReactReduxContext is the magic sauce we need in order to get the current state of the store in a component. Note the changes in our below component.
import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect, ReactReduxContext } from "react-redux"; // CHANGED!
import * as AActions from "../aactions";
import * as BActions from "../bactions";
import * as CActions from "../cactions";
class MyComponent extends Component<Props>{
constructor(props){
super(props);
this.func = this.func.bind(this);
};
func(store){ // CHANGED!
// Add item to A
this.props.addAItem("value");
// Get id of newly added item in A
let addedA = store.getState().A.find(a => a.name === "value"); // CHANGED!
// Insert new items in B with the id of A
this.props.addBItem(addedA.id, "valueB");
// etc...
}
// CHANGED!
render(){
<ReactReduxContext.Consumer>
{({store}) => {
return <div onClick={() => this.func(store)}>click me</div>
}}
</ReactReduxContext.Consumer>
}
}
function mapStateToProps(state, props){
return {
A: state.A,
B: state.B,
C: state.C
};
}
function mapDispatchToProps(dispatch){
return bindActionCreators({...AActions, ...BActions, ...CActions}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
The magic is store.getState() which returns the updated Redux store.
I want to point out I looked extensively at redux-thunk, but this approach didn't end up giving what I needed. The main problem is the use of bindActionCreators in my component. Because I am using bindActionCreators, any action that I call expects an empty object, which gets dispatched to the Redux store.
I attempted many ways to try and return the updated Redux state in an action but since I was using bindActionCreators, I could not return the value of the Redux state from a given action. The only way to retrieve an updated Redux store state without relying on the component itself to be updated/re-rendered is to use the method I outline above.

Answer 3

shouldComponentUpdate should do the trick