One thing you might do is create a higher order component that handles the basic pattern of loading a different component (or no component) before the required props are loaded. export const LoaderWrapper = function(hasLoaded, Component, LoaderComponent, onLoad) { return props => { if (hasLoaded(props)) { return <Component {…props} /> } else { if (onLoad) … Read more
You can definitely have reducers inside of reducers; in fact, the redux demo app does this: http://redux.js.org/docs/basics/Reducers.html. For example, you might make a nested reducer called `discounts’: function discounts(state, action) { switch (action.type) { case ADD_DISCOUNT: return state.concat([action.payload]); // etc etc } } And then make use of this reducer in your account reducer: function … Read more
There is no general answer to this question so we have to evaluate on a case by case basis. When using Redux, you should strive to keep a balance between keeping reducers simple and keeping the action log meaningful. It is best when you can read the action log and it makes sense why things … Read more
Redux connect accepts an option parametre as the forth parameter. In this option parameter you can set the flag withRef to true. Then you can access functions to refs by using getWrappedInstance(). Like this: class MyDialog extends React.Component { save() { this.refs.content.getWrappedInstance().save(); } render() { return ( <Dialog action={this.save.bind(this)}> <Content ref=”content”/> </Dialog>); } } class … Read more
I usually create a global.js containing: module.exports = { screen1: null, }; And get the value of the state on the screen import GLOBAL from ‘./global.js’ constructor() { GLOBAL.screen1 = this; } Now you can use it anywhere like so: GLOBAL.screen1.setState({ var: value });
Enzyme’s mount takes optional parameters. The two that are necessary for what you need are options.context: (Object [optional]): Context to be passed into the component options.childContextTypes: (Object [optional]): Merged contextTypes for all children of the wrapper You would mount SampleComponent with an options object like so: const store = { subscribe: () => {}, dispatch: … Read more
axios is the promise so you need to use then to get your result. You should request your api in a separate file and call your action when the result comes back. //WebAPIUtil.js axios.get(‘http://localhost:3000/flug’) .then(function(result){ YourAction.getAllFlights(result) }); In your action file will be like this : export function getAllFlights(request) { console.log(request); return { type: FETCH_FLIGHT, … Read more
Version using react-redux hooks: You can even cut out the connect function completely by using useDispatch from react-redux: export default function MyComponent() { useFetching(fetchSomething); return <div>Doing some fetching!</div> } with your custom hook import { useDispatch } from ‘react-redux’; const useFetching = (someFetchActionCreator) => { const dispatch = useDispatch(); useEffect(() => { dispatch(someFetchActionCreator()); }, []) … Read more
This is what React-Redux says when you are using createAsyncThunk You can only pass one argument to the thunk when you dispatch it. If you need to pass multiple values, pass them in a single object So instead of export const submitPaymentToServer = createAsyncThunk( ‘data/fetchAll’, async ({ name, data }) => { // here you … Read more
This question was on my head when I started developing react apps. There are many reasons than below to use redux over localStorage. but at least Using Redux alongside react-redux is not only for store data. don’t forget that changing in a state will reRender All components that listen to that state. and that is … Read more