redux

问题 I am learning redux and I have put up a simple code which uses the store, action and reducer. I am using store.subscribe() to listen for changes in the state and using it to update my local state. Below is my entire code in index.js: import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; var store = createStore(changeState); var initialState = { qty: 0, price: 0 } function changeState(state = initialState, action) { switch (action.type) { case

问题 Let's say i have the following components structure: App -> Comp1 -> Comp2 -> Comp3 -> Comp4 -> Comp5 Where App is the parent component of Comp1 which is the parent component of Comp2 and so on. I create the store in App and connect it to Comp1 with the "connect" function from the "react-redux" library. Now, what do i do if i want to access the app state or dispatch an action from Comp5 ? The way i'm aware of is to pass the props (state and dispatch) all the way from App too Comp5 which doesn

问题 I have a redux app which enables users to post something(like a blog post which contains only a title and body).The user can edit the post whenever they want to.I am not able to update the reducer,i.e. I just want to update the title and the body for that particular "id" . I am trying to update the state in my reducer as shown below: case SUBMIT_POST: let id = action.payload.id; return { ...state, [id]: { ...state[id], title: action.payload.title, body: action.payload.body } }; My action

问题 I'm currently using redux-persist to persistent data storage in my react-redux application. I have set it up according to the documentation. I have tested it on a separate project with npx create-react-app . The persistent storage was working properly. When I integrate it in my actual working project, the state saving doesn't work. Can someone help me with this? Here is my store.js: import { createStore, applyMiddleware, compose } from 'redux'; import { routerMiddleware } from 'react-router

问题 I have an image that is stored in local storage. On load the image is displayed. componentDidMount() { const reader = new FileReader(); reader.onload = e => { this.setState({ blob: e.target.result }); }; reader.readAsDataURL(this.props.file); } render() { return ( <div> <img src={this.state.blob} /> </div> ) } The file object looks like this: lastModified:1535424554987 name:"test.jpeg" preview:"blob:http://localhost:8080/b52098ca-087f83c778f0" size:41698 type:"image/jpeg" webkitRelativePath:"

问题 (I know that this is a simple question. Before posting I have tried to find the answer in previous questions. There are many questions regarding setState being asynchronous, about that you can use a callback function, etc., but I didn't find a question similar to the following). When implementing a simple form in React, like the one that is shown here (under the controlled components title, also copied below): Since setState is asynchronous, the example isn't guaranteed to work, right? (Since

问题 i am using redux to store the user data like his name,user id ,user image and user email in redux. The reducer for that is const initialState = { user: [] }; function rootReducer(state = initialState, action) { if (action.type === 'ADD_USER') { return Object.assign({}, state, { user: state.user.concat(action.payload) }); } if (action.type === 'REMOVE_USER') { //return Object.assign({}, initialState) return { ...state, user : [] } } if (action.type === 'CHANGE_USER') { state.user.splice(0)

问题 I am new to react redux. I am trying to build a simple restaurant app with foursquare api. I have two actions which makes api calls to 1st. search the restaurant and 2nd one to fetch details like this. Action.js export const fetchVenueDetail = venueId => dispatch => { console.log("dispatching"); dispatch({ type: FETCH_VENUE_REQUESTED }); fetch( `https://api.foursquare.com/v2/venues/${venueId}? client_id=${api_id}&client_secret=${api_key}&v=20180422` ) .then(res => res.json()) .then(data =>

问题 I'm trying to figure out how to reduce the amount of boilerplate when using React, Redux and TypeScript together. It might be that you can't in this case, but wanted to see if anyone has ideas. I currently have a component that dispatches an action that toggles a menu, alternating between showing and hiding it. To do this I've defined my class something like this (omitting code related to state, focusing on the dispatching of action): import {Action, toggleMenu} from "../../actions/index";

问题 I have a React stateless component using redux and hooks. I need to display the number of items on page load (useEffect) and update it every time I add or remove an item (store.subscribe) useEffect(() => { setState({ items: store.getState().items.length }); }, []); store.subscribe(() => { setState({ items: store.getState().items.length }); }); but this is causing the console to display the warning Can't perform a React state update on an unmounted component. This is a no-op, but it indicates