i have two fields with redux form. I have a refresh button through which i update my state through an action. This refresh button updates three text values. My problem is that i must refresh the field values of my form. How to update the state of my redux form. I'm thinking of using a selector like this:
export const formsState = state => state.get('form');
Then i will create a reducer which is taking the formstate and updates it with
update formsState
.update('order', action.payload.price);
But i dont think this is the best solution. Do have some better ideas?
Make sure you refresh button send an action which will update your store via the reducer.
In order to update your component I would suggest to use a react containers usinng connect.
Use the following function:
store.getState() to get your state.
store.dispatch() to dispatch your action.
Related
I am trying to wrap FullCalendar React component with my own functional React component with useContext hook to access MobX store (I might use the store in other components eventually) and observer() to make it react to changes in the store. My component reacts as I would expect, but I have trouble making the FullCalendar component render after a change.
I've tried finding a solution, wrapping <FullCalendar> in <Observer>, playing with autorun() and reaction() but nothing worked. I have to be missing something
This sandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 shows a simplified version of my solution so far.
Clicking the button at the top adds an event to the observable store, which gets shown in a list below it. But the calendar doesn't show the new event.
Weirdly enough if I make a change in the code, save it, the CodeSandbox causes the render and the events show up in the calendar.
Thanks to #ADyson, I found a solution. Instead of passing a static list of events to the FullCalendar component
events={store.events}
I can pass an event fetching function. So in the most trivial case, I can just pass the events from the store to the successCallback function and it works.
events={(fetchInfo, successCallback, failureCallback) => {
successCallback(store.events);
}}
I've updated the CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 as well.
So I am learning NGRX and I am close to understanding how it works, I am dispatching events and I can see them in store-devtools chrome extension.
What I want to know is how can I save a state and apply it after? My purpose is to save a state from a specific page so that when I'm back to that page I will apply the old state and I will not lose my work there
Here's my repo: https://bitbucket.org/wmoreiradev/ngrxonfire/src/effects-refactor/
You can do this like bellow
Create actions to save and load current state.
Save the current state before leaving the page. You can do this inside the reducer function or inside a effect like bellow
localStorage.setItem("currentState", JSON.strigify(state));
When you load the page dispatch an action to load the saved state inside a reducer
case Actions.LOAD_SAVED_STATE:
return {...state, ...action.payload};
also, remove the save state from localStorage.
Reducers listen for actions of a certain type and then update the store as needed, but should you use an action without changing the store?
Maybe on route changes or on button clicks so that what the user does shows up in timemachine, or is this abusing actions?
Actions are linked to reducers through their 'type', in general actions should be linked with at least one reducer.
It seems like you can achieve the functionality you are looking for by creating a function inside your component that is your method called by the onClick, submit, or whatever activity happens, something like this:
myOnCLickMethod(passedInfo){
const {dispatch} = this.props
//any JavaScript code you need
dispatch(myAction(passedInfo))
}
This ensures you can do anything you want that doesn't touch the state while still allowing for actions to fire and state changes when that activity happens.
An action is a call for state change. So if route changes or button clicks don't change the state of your app, you shouldn't use actions for them. Maybe log is more relevant in this scenario.
When dispatching several different actions for one reducer, only the last one triggers component update. It might be better to show then explain.
Some notes on provided example:
App component reflects a history of updates of it's prop redirectPath. When it comes as null then no redirect string adds to history.
There is a reducer which returns just a plain string or null depending on action.
By pressing a button Do redirect I expect both actions (SET_REDIRECT and CLEAR_REDIRECT) provide changed state to AppContainer component. But only the latest one (CLEAR_REDIRECT) triggers render method with null value.
If we add slight delay between dispatching these actions, then both of them trigger component's render. You can check it by pressing Do redirect with delay button.
I expect both changes (provided by SET_REDIRECT and CLEAR_REDIRECT actions) in state should trigger component update without using setTimeout when dispatching actions.
I also tried to move dispatching of CLEAR_REDIRECT from middleware, after it gets SET_REDIRECT, but the same result.
Can I somehow reach expected behaviour?
Initially I posted the issues to redux repo, because I thought it's an issue in redux, but #jimbolla explained me that it's mostly by design of react.
Here is the reference to the original issues and comments from redux team member https://github.com/reactjs/redux/issues/2532.
Don't ever rely on performing state updates in render(). The only code that should be executed in render() is the code required to construct the view.
You could use componentWillReceiveProps to track when your component receives new properties.
You should listen for the appropriate property and perform your redirect when received. You should then listened for a property that indicates the redirection was successful and then you can dispatch an action to clear the redirect state if required which will trigger another component update.
I am trying to get the following behavior in react using redux. I have two side by side components both have a <input> textfield that displays the same value. When I edit either of the field's, I want to dispatch an action and have redux store update the state of my app in both components
Exactly like asana app.
when I edit the field on left it updates the field on the right side as well
and when i edit the field on right, It updates the text field on left as well
I can only get it working one way and not both ways. I am using the value prop of the <input> textfield and keeping a state variable to update the <input> textfield as described in
react-docs.
I have state variable in one component and other one directly listens to the props.
I tried using the defaultValue prop if <input> textfield but it runs into other problems of not updating value when switching between different items
Hard to answer this without seeing your code, but based on what you're saying it sounds like you are storing one input's value on state?
If I want a value to be linked to a global store, I wouldn't store it on state. I'd do something like this (a bit pseudocody but hopefully you get the idea!)
onChange: function (e) {
this.props.dispatch(updateName(e.target.value));
},
render: function() {
return (
<input value={this.props.name} onChange={this.onChange} />
);
}
The dispatch causes an update to the global store which then cascades that updated name value back down to the react component you are currently typing in, as well as the other input elsewhere that is populated by the same data.