action.merge and action.change

[iBasit]

The Problem

on componentDidMount I want to fetch url parms and overwrite form values. I'm using dispatch with action.merge and I have even tried other methods like action.change and action.load. it does not effect at all.

Steps to Reproduce

my store.js file

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
import createSagaMiddleware from 'redux-saga';
import qhistory from 'qhistory'

import { stringify, parse } from 'qs'

export const history = qhistory(
    createHistory(),
    stringify,
    parse
);

// Create the saga middleware
const sagaMiddleaware = createSagaMiddleware();

const initialState = {}
const enhancers = []
const middleware = [
    sagaMiddleaware,
    routerMiddleware(history),
    thunk,
]


if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
)

const store = createStore(
    rootReducer,
    initialState,
    composedEnhancers
)

export default store

import React, {Component} from "react";
import {connect} from "react-redux";
import { withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { actions } from 'react-redux-form';

import DisplayInstantPriceList from './DisplayInstantPriceList';
import HeadersFilters from './HeaderFilters';

class Sales extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {location} = this.props;
        this.props.updateUrl2Form(location.query);
    }

    render() {
        // const { user } = this.props;

        return (
            <div>
                <HeadersFilters {...this.prop} />
                <div className="row">
                    <div className="col-xs-3 col-sm-3 col-md-3 col-lg-2">
                        sidebar
                    </div>
                    <div className="col-xs-9 col-sm-9 col-md-9 col-lg-10">
                        <DisplayInstantPriceList />
                    </div>
                </div>
            </div>
        )
    }
}

const updateUrl2Form = (values) => { return (dispatch) => {
    console.log('updateURL2Form: ',values);
    dispatch(actions.reset('formFilter'));
    dispatch(actions.load('formFilter', values));
    dispatch(actions.merge('formFilter', values));
    dispatch(actions.change('formFilter', values));

    setTimeout(() => {
        dispatch(actions.reset('formFilter'));
        dispatch(actions.load('formFilter', values));
        dispatch(actions.merge('formFilter', values));
        dispatch(actions.change('formFilter', []));
    }, 1000);
}}
// const mapDispatchToProps = (dispatch) => ({ getUserDetails: (username) => dispatch(getUserDetails(username)) });


const mapStateToProps = (state, props) => {
    return {

    };
};

const mapDispatchToProps = dispatch => bindActionCreators({
    updateUrl2Form
}, dispatch)


Sales = withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(Sales));

export default Sales;

Expected Behavior

form values to be overwritten to new values

Actual Behavior

showing the default values

[davidkpiano]

Please put this in a CodePen or CodeSandbox. It's the only way I can properly test it.

[iBasit]

Do you have any CodePen actions.merge or action.contact examples, maybe I can see the demo and see if I'm doing anything wrong.

[so5tmaker]

Hello! I have the same problem with actions.merge...

[so5tmaker]

Hello! As for me, I solved this problem. I used a Redux action generator actions.merge. At first, It didn't work because I tried to invoke it from the child component. But I should have done it in the MainComponent.js file in the componentDidUpdate hook.

In the ActionCreators.js I declared:

import actions from 'react-redux-form';

. . .

export const setDefaultFormValues = (values) => (dispatch) => {
    dispatch(setDefaultUser: (values) => actions.merge(‘editTask’, values));
}

Then in the MainComponent.js I wrote:

. . .

import { setDefaultValues } from '../redux/ActionCreators';

const mapDispatchToProps = dispatch => ({

. . .

    setDefaultValues: (values) => dispatch(setDefaultValues(values))
});

componentDidUpdate() {
        let pathname = this.props.location.pathname;
        let pos = pathname.search("/edit/") + 6;
        let taskId = pathname.substring(pos, pathname.length);
        if (taskId) {
            let tasks = this.props.tasks.tasks.tasks;
            if (tasks) {
                let task = tasks.filter(task => task.id === parseInt(taskId, 10))[0];
                if (task) {
                    this.props.setDefaultValues(task);
                }
            }
      }
}