redux dev-tools 内で redux 状態が更新されていることがわかりますが、その値がそれに接続されているコンポーネントに反映されていないという奇妙なシナリオがあります。
だから私はコンポーネントCreateEnvironmentのようなものを持っています
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;
対応するコンテナは次のようになります。
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);
WorkflowPagelike内のすべてのコンポーネントEnvironmentは、Formik パターンを使用するフォームです。サンプル コンポーネントは次のとおりです。
interface Props {
certificate?: CertificateStep;
onUpdate?: (key: string, value: any) => void;
}
class Certificate extends Component<Props> {
private submitForm: (
e?: React.FormEvent<HTMLFormElement> | undefined
) => void;
public render() {
const { formValues } = this.props.certificate!;
console.log(formValues); //tslint:disable-line
return (
<Form
className="license"
type="horizontal"
initialValues={formValues}
onSubmit={this.onSubmit}
>
{formProps => {
this.submitForm = formProps.handleSubmit;
return (
<Fragment>
<CheckboxField
name="productSpecific"
id="productSpecific"
type="toggle"
>
Provide Product Specific Certificate
</CheckboxField>
<SelectField name="certificate" label="Certificate">
<SelectOption value="">---Select Certificate---</SelectOption>
</SelectField>
</Fragment>
);
}}
</Form>
);
}
public handleSubmit = () => {
this.submitForm();
}
private onSubmit = (values: FormValues, actions: FormActions) => {
this.props.onUpdate!('certificate', values);
actions.setSubmitting(false);
}
}
export default Certificate;
次をクリックするとWorkflowButton、アクション updateEnvironmentWorkflow を渡すことによって redux 状態が更新されます。アクションは次のようになります。
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
});
そして、私のレデューサーは次のようなものです:
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;
ここで奇妙なのは、次のボタンをクリックすると、還元状態が新しい値で更新されることです。他のページに移動して環境を作成するために戻ってくると、フォームの値は redux ストアの状態から更新された値を示しています。
しかし、前のボタンを押すと、状態値に更新された値が表示されません。Certificate の render() 内の console.log(formValues) は、初期値のみを表示しています。
どんな助けでも大歓迎です。ありがとう。
Form の initialValues も Formik initialValues です。それはおそらくformikの問題でもあります