You have to dispatch after the async request ends. This would work: export function bindComments(postId) { return function(dispatch) { return API.fetchComments(postId).then(comments => { // dispatch dispatch({ type: BIND_COMMENTS, comments, postId }); }); }; }
The API provides component for this purpose. <Button variant=”contained” component=”label” > Upload File <input type=”file” hidden /> </Button>
Without using any other libraries: import * as axios from “axios”; // Mock out all top level functions, such as get, put, delete and post: jest.mock(“axios”); // … test(“good response”, () => { axios.get.mockImplementation(() => Promise.resolve({ data: {…} })); // … }); test(“bad response”, () => { axios.get.mockImplementation(() => Promise.reject({ … })); // … }); … Read more
Solving this without importing and exposing package.json to the create-react-app Requires: version 1.1.0+ of create-react-app .env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name index.js console.log(`${process.env.REACT_APP_NAME} ${process.env.REACT_APP_VERSION}`) Note: the version (and many other npm config params) can be accessed Note 2: changes to the .env file will be picked only after you restart the development server
You have to add a condition in your componentDidUpdate method. The example is using fast-deep-equal to compare the objects. import equal from ‘fast-deep-equal’ … constructor(){ this.updateUser = this.updateUser.bind(this); } componentDidMount() { this.updateUser(); } componentDidUpdate(prevProps) { if(!equal(this.props.user, prevProps.user)) // Check if it’s a new user, you can also use some unique property, like the ID (this.props.user.id … Read more
As @markerikson already says, redux-saga exposes a very useful API select() to invoke a selector on the state for getting some part of it available inside the saga. For your example a simple implementation could be: /* * Selector. The query depends by the state shape */ export const getProject = (state) => state.project // … Read more
If you want to use mapDispatchToProps without a mapStateToProps just use null for the first argument. export default connect(null, mapDispatchToProps)(Start)
Two different options to add item to an array without mutation case ADD_ITEM : return { …state, arr: […state.arr, action.newItem] } OR case ADD_ITEM : return { …state, arr: state.arr.concat(action.newItem) }
What even is ‘children’? The React docs say that you can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. For me, that didn’t really clear things up. I’m sure for some, that definition makes perfect sense but it didn’t for me. My simple explanation of what … Read more
Yes, it is correct. Its just a helper function to have a simpler way to access your state properties Imagine you have a posts key in your App state.posts state.posts // /* { currentPostId: “”, isFetching: false, allPosts: {} } */ And component Posts By default connect()(Posts) will make all state props available for the … Read more