redux-form fire action change value but not change input value - reactjs

I'm using simple form by redux-form. I can see the log which fire action which change the field however it the change is not displayed in input field itself. Seems redux-form is not able to change input value. I'm using React version 16.3.
[Update]
I'm using exact sample redux-form document.

I suscpect that You didn't connect redux-form with store. I had one same issue. This code is important.
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
const rootReducer = combineReducers({
// ...your other reducers here
// you have to pass formReducer under 'form' key,
// for custom keys look up the docs for 'getFormState'
form: formReducer
})
const store = createStore(rootReducer)

Related

store defaultstate with redux observable middleware

I am making a redux observable epic as middleware, and also want to provide a default state to store. At some places I have seen applyMiddleware as third argument to createStore function whereas at some places it is second argument. How can I acheive this?
I am trying this
const defaultState = {users: []};
const store = createStore(rootReducer, defaultState, applyMiddleWare(middleWare));
My main App looks like this
import { bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreator';
import Main from './Main';
import 'rxjs';
function mapStatesToProps(state) {
return {
users: state.users,
error: state.error
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStatesToProps, mapDispatchToProps)(Main);
export default App;
But this is not setting the default state.
Indeed you are supposed to pass the default state as the second argument. There must be a bug in code that isn’t provided here.
Have you tried reproducing the problem outside of your app? If you have and can share that complete code to reproduce, I can take a look.
I found the problem, it was happening because mismatch of reducer name and default state property,
My reducer name was User whereas I was trying to add users property to default state. After making both of them users it works fine
Can you try using "compose" in 3rd parameter, something like below?
import { compose } from 'redux';
const defaultState = {users: []};
const store = createStore(rootReducer, defaultState, compose(applyMiddleWare(middleWare)));

How do I use redux-form/immutable with plain immutable library?

I'm a ReactJS beginner. This how my store is created as of now
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import { reducer as formReducer } from 'redux-form';
import thunk from 'redux-thunk'
import { reducer as usersDataReducer } from 'data/reducer'
import { reducer as authReducer } from 'scenes/Main/scenes/Auth/reducer'
import { reducer as sessionReducer } from 'services/reducer'
const appReducer = combineReducers({
data: usersDataReducer,
scenes: authReducer,
session: sessionReducer,
routing: routerReducer,
form: formReducer,
})
export default createStore(appReducer, compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : (f) => f
))
I successfully integrated redux-form in my app. However, all reducers in my app are using plain immutable library so I'd like to use redux-form's immutable version for consistency. I have no idea because in redux-form's documentation, the example requires using redux-immutablejs library. It adds complexity to the already complicated redux-form. I'd like to use plain immutable library and if it's not encouraged, I'd need help to integrate redux-form/immutable + redux-immutablejs in my current setup. Any help would be appreciated.
Okay, I learned that you just need to use redux-form/immutable instead of just redux-form anywhere in your code.

Do I have to mount redux-form to the “form” key in the root of my state?

The getting started page says:
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
const reducers = {
// ... your other reducers here ...
form: formReducer // <---- Mounted at 'form'
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
But the reduxForm() documentation says:
form : String [required]
the name of your form and the key to where your form's state will be mounted under the redux-form reducer
I am running the Simple Form example. I have this code:
var reduxFormReducer = reduxForm({
formKey: 'personal' // a unique identifier for this form
})(SimpleForm);
var reducer = combineReducers({
formKey: reduxFormReducer
});
But it shows this error:
Warning: Failed prop type: Required prop form was not specified in Form(SimpleForm). in Form(SimpleForm) (created by Connect(Form(SimpleForm)))
I've tried this:
var reduxFormReducer = reduxForm({
form: 'formKey' // a unique identifier for this form
})(SimpleForm);
var reducer = combineReducers({
formKey: reduxFormReducer
});
It doesn't show that error but the edit fields are empty and can't change.
I Hope your missed in reducer, please use the key name as form
var reduxFormReducer = reduxForm({
form: 'formKey' // a unique identifier for this form
})(SimpleForm);
var reducer = combineReducers({
form: reduxFormReducer // <- change formKey to form here
});
refer: http://redux-form.com/6.0.2/docs/GettingStarted.md/
Update:
The form reducer. Should be given to mounted to your Redux state at form.
If you absolutely must mount it somewhere other than form, you may provide a getFormState(state) function to the reduxForm() decorator, to get the slice of the Redux state where you have mounted the redux-form reducer.

Can i connect redux-form [v6] to other state, like in [v5]?

Can i configure mapStateToProps and other react-redux parameters in redux-form v6.
Like this in redux-form v5 ~> http://i.stack.imgur.com/nSZKM.jpg
reduxForm(config:Object, mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)
Creates a decorator with which you use redux-form to connect your form component to Redux. It takes a config parameter and then optionally mapStateToProps, mapDispatchToProps, mergeProps and options parameters which correspond exactly to the parameters taken by react-redux's connect() function, allowing you to connect your form component to other state in Redux.
.
For example:
import { reduxForm } from 'redux-form/immutable';
...
export default reduxForm({
form: 'signUp'
}, state => ({
lists: state.get('list').toJS()
}));
Yes, you can connect your redux state to your redux-form component in version 6. Here is an example (You have to decorate connect manually now).
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import {
actionCreatorOne,
actionCreatorTwo
} from './actionCreators';
class MyForm...
function mapStateToProps(state) {
return {
name: state.user.name
};
}
let mapDispatch = {
actionCreatorOne,
actionCreatorTwo
};
MyForm = reduxForm({
form: 'myForm'
})(MyForm);
export default MyForm = connect(mapStateToProps, mapDispatch)(MyForm);

In React with Redux, why routerReducer is needed

I can see some sample projects are using routerReducers when call combineReducers(), e.g.
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import posts from './posts'
import comments from './comments'
const rootReducer = combineReducers({posts, comments, routing: routerReducer})
why it is necessary to add routerReducer as an argument of combineReducers()?
thanks
When we want to store router state inside Redux Store then we have to use
routerReducer.In simple case we do only
import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'
export default combineReducers({
todos,
counter
})
That because redux will store all state in one store.
That's only one store in an app with redux, so you will need to combine all your reducers together to one, and create the only store from it.
Please see Principles Of Redux to get details.

Resources