Odtnhj

I have a weird scenario in which inside my redux dev-tools I can see that the redux state has been updated but that value is not being reflected in the component which is connected to that.

So I have a component CreateEnvironment like

export interface StateProps 
 environment: EnvironmentStep;
 selectProduct: SelectProductStep;
 eula: EULAStep;
 license: LicenseStep;
 infrastructure: InfrastructureStep;
 network: NetworkStep;
 certificate: CertificateStep;
 products: any;


export interface DispatchProps 
 onFormValuesUpdate: (key: string, value: any) => void;


type Props = StateProps & DispatchProps;

interface State 
 dashboard: boolean;


class CreateEnvironment extends Component<Props, State> 
 private page: RefObject<any>;
 constructor(props: Props) 
 super(props);
 this.state = dashboard: false ;
 this.page = React.createRef();
 
 public render() 
 console.log("Hi"); //tslint:disable-line
 if (this.state.dashboard) 
 return <Redirect to="/dashboard" />;
 
 const 
 environment,
 eula,
 selectProduct,
 infrastructure,
 network,
 license,
 certificate,
 onFormValuesUpdate
 = this.props;
 return (
 <Fragment>
 <h2>Create Environment</h2>
 <div style= height: '100%', paddingBottom: '30px' >
 <WorkFlow
 orientation="vertical"
 onNext=this.onNext
 onFinish=this.onFinish
 >
 <WorkFlowPage pageTitle="Environment">
 <Environment
 environment=environment
 onUpdate=onFormValuesUpdate
 ref=this.page
 />
 </WorkFlowPage>
 <WorkFlowPage pageTitle="Products & Solutions">
 <SelectProduct
 ref=this.page
 selectProduct=selectProduct
 onUpdate=onFormValuesUpdate
 />
 </WorkFlowPage>
 <WorkFlowPage
 pageNavTitle="EULA"
 pageTitle="End User License Agreement Details"
 >
 <Eula eula=eula ref=this.page onUpdate=onFormValuesUpdate />
 </WorkFlowPage>
 <WorkFlowPage pageTitle="License">
 <License
 license=license
 ref=this.page
 onUpdate=onFormValuesUpdate
 />
 </WorkFlowPage>
 <WorkFlowPage pageTitle="Infrastructure">
 <Infrastructure
 infrastructure=infrastructure
 ref=this.page
 onUpdate=onFormValuesUpdate
 />
 </WorkFlowPage>
 <WorkFlowPage pageTitle="Network">
 <Network
 network=network
 ref=this.page
 onUpdate=onFormValuesUpdate
 />
 </WorkFlowPage>
 <WorkFlowPage pageTitle="Certificate">
 <Certificate
 certificate=certificate
 ref=this.page
 onUpdate=onFormValuesUpdate
 />
 </WorkFlowPage>
 <WorkFlowPage pageTitle="Products">I am products step</WorkFlowPage>
 <WorkFlowPage pageTitle="Summary">I am summary step</WorkFlowPage>
 <WorkFlowButton role="previous">Back</WorkFlowButton>
 <WorkFlowButton role="next">Next</WorkFlowButton>
 <WorkFlowButton role="finish">Finish</WorkFlowButton>
 </WorkFlow>
 </div>
 </Fragment>
 );
 

 private onNext = () => 
 if (this.page.current) 
 this.page.current.handleSubmit();
 
 

 private onFinish = () => 
 this.setState(
 dashboard: true
 );
 


export default CreateEnvironment;

The corresponding container looks like:

import connect from 'react-redux';
import Dispatch from 'redux';
import 
 CreateEnvironmentAction,
 updateEnvironmentWorkflow
 from '../actions/CreateEnvironment';
import 
 CreateEnvironment,
 DispatchProps,
 StateProps
 from '../components/create-environment';
import StoreState from '../types';
export const mapStateToProps = (
 createEnvironment
: StoreState): StateProps => (
 ...createEnvironment
);

export const mapDispatchToProps = (
 dispatch: Dispatch<CreateEnvironmentAction>
): DispatchProps => (
 onFormValuesUpdate: (key: string, values: any) => 
 dispatch(updateEnvironmentWorkflow(key, values));
 
);

export default connect<StateProps, DispatchProps>(
 mapStateToProps,
 mapDispatchToProps
)(CreateEnvironment);

All the components inside WorkflowPage like Environment are forms which use the Formik pattern.
A sample component is:

interface Props 
 certificate?: CertificateStep;
 onUpdate?: (key: string, value: any) => void;

class Certificate extends Component<Props> 
 private submitForm: (
 e?: React.FormEvent<HTMLFormElement> 

export default Certificate;

On clicking the next WorkflowButton the redux state is updated by passing an action updateEnvironmentWorkflow. The action is like:

export interface UpdateEnvironmentWorkflow 
 type: Constants.UPDATE_ENVIRONMENT_WORKFLOW;
 payload: 
 key: string;
 value: any;
 ;


export type CreateEnvironmentAction = UpdateEnvironmentWorkflow;

export const updateEnvironmentWorkflow = (
 key: string,
 value: any
): UpdateEnvironmentWorkflow => (
 payload: key, value ,
 type: Constants.UPDATE_ENVIRONMENT_WORKFLOW
);

And my reducer is like:

const createEnvironment = (
 state: CreateEnvironment = initialState.createEnvironment,
 action: CreateEnvironmentAction
) => 
 switch (action.type) 
 case Constants.UPDATE_ENVIRONMENT_WORKFLOW:
 return 
 ...state,
 [action.payload.key]: 
 ...state[action.payload.key],
 formValues: action.payload.value
 
 ;
 default:
 return state;
 
;

export default createEnvironment;

Now the weird part is that if I click the next button the redux state is updated with new values. If I navigate to some other page and come back to create environment my form values are showing the updated values from the redux store state.

BUT if I just hit the previous button my state values are not showing updated values.
The console.log(formValues) inside render() of Certificate is showing initial values only.

Any help will be appreciated. Thanks.

Also initialValues of Form is Formik initialValues. It maybe a formik issue as well