redux

How to work with API call action in redux?

不羁岁月 提交于 2021-01-29 03:23:37
问题 I am new to redux and I am trying to make it work with my application, but I have problems with understanding how to work with async actions in it. I have action that is api call. This action should be called as soon as my other state is not empty. I do not get any mistakes but do not think that my action is called since the data is empty. Can anybody help to understand what I am doing wrong? Here is my actions.js. The wordsFetchData is the action I need to call: export function

undefined is not an object (evaluating ' _firebase.firebase.firestore

情到浓时终转凉″ 提交于 2021-01-29 02:40:57
问题 i want to fetch all data from firestore and show on a list export const fetchAds = () => { return dispatch => { firebase .firestore() .collection("ads") .get() .then(ads => { dispatch({ type: FETCH_ADS, ads }); }); }; }; this is my actions file import * as actions from "../../actions"; class HomeScreen extends Component { renderAds() { return this.props.ads.map((ad, index) => { return <Cards key={index} ad={ad} />; }); } function mapStateToProps(state) { return { ads: state.ads.data }; }

how to denormalize entities from redux store?

点点圈 提交于 2021-01-28 19:08:16
问题 i have a data state in redux store like: { 123: { a: 'abc' }, 456: { a: 'def' }, 789: { a: 'ghi' }, } this is an array of objects like: const trainersArray= [ { _id: 123, a: 'abc' }, { _id: 456, a: 'def' }, { _id: 789, a: 'ghi' }, ] export const trainer = new schema.Entity( 'trainers', {}, { idAttribute: '_id' } ); const { trainers: normalizedTrainers } = normalize(trainersArray, [ trainer, ]).entities; now i want to denormalize like below in a component but i just don't get it? const

Property 'then' does not exist on type 'AsyncThunkAction' Redux-toolkit

旧城冷巷雨未停 提交于 2021-01-28 19:07:20
问题 I can't seem to receive a Promise from createAsyncThunk function from Redux-toolkit I'm fairly new to Typescript and I'm struggling to figure out why it's giving me Property 'then' does not exist on type 'AsyncThunkAction<Student, number, {}>' error even though the promise does get returned if I remove the typing. Here is my createAsyncThunk f-n export const getStudentByIdRequest = createAsyncThunk<Student, number>( 'student/getStudentByIdRequest', async (id, { rejectWithValue }) => { try {

Child component in react prevents parent component from importing redux store

允我心安 提交于 2021-01-28 11:15:46
问题 I have two react components which work independently of each other but when connected seem to break the core of my program. My setup is this: Redux store --> MusicList.js(first component) --> AppNavbar.js(second component inside MusicList.js). Independently the redux store works perfectly with the first component, but when I connect my second component to MusicList.js it breaks the importation of my store. There is also a third component "Items.js" which is connected to MusicList.js in the

Could not find “store”, even if the root is wrapped in Provider

十年热恋 提交于 2021-01-28 11:14:03
问题 I have an SSR react-redux app. Where I have the main index.js file including the App Component wrapped in Provider . But If I try to use connect in the App component it throws this error: Uncaught Invariant Violation: Could not find "store" in the context of "Connect(App)" I've already checked out these solutions, and none is relevant to me. related 01 related 02 related 03 // index.js import React from 'react'; import { Provider } from 'react-redux'; import App from './App'; import

How to Write A Typed Action Without Parameters

断了今生、忘了曾经 提交于 2021-01-28 09:38:15
问题 A Github issue suggests that we can use TypedAction.defineWithoutPayload for this purpose but I couldn't find any relevant examples on how to do so. I use this for login when an accessToken is being stored in the payload. If the token is present, the user gets access to private pages. export const login = (token: string) => typedAction("LOGIN", token); Now, on the logout button, I am trying to implement an action that removes the stored value in the payload. In this case, there will be no

Get selected value I inserted to dropdown when I'm editing the client form

会有一股神秘感。 提交于 2021-01-28 09:21:44
问题 I need to get the value from Client Form I inserted. e.g nationalities:["english","french","american"] The expected output is for example, I selected american, then I see american in nationality dropdown field when I'm editing client form. But the actual result is the first element from the dropdown is always selected, english in this case. I need to access the selected value from dropdown when I'm editing the client form. This is my code: componentWillReceiveProps = nextProps => { // Load

How to dispatch multiple actions in react redux?

£可爱£侵袭症+ 提交于 2021-01-28 09:14:30
问题 Here is a simple flow of what I want to achieve: And here is the components executions: onClick function: this.props.FetchQueryData({dateRange: this.props.dateData.dateRange, selections: selections}); Redux FetchQueryData function: export const fetchSidebBatData = (sideBarData) => { return dispatch => { dispatch(fetchSidebBatDataBegin()); //For turning on isLoading console.log("Started"); //For fetching the data Object.keys(data).forEach(element => { //Here Data is an object to get the right

How to dispatch multiple actions in react redux?

混江龙づ霸主 提交于 2021-01-28 09:09:44
问题 Here is a simple flow of what I want to achieve: And here is the components executions: onClick function: this.props.FetchQueryData({dateRange: this.props.dateData.dateRange, selections: selections}); Redux FetchQueryData function: export const fetchSidebBatData = (sideBarData) => { return dispatch => { dispatch(fetchSidebBatDataBegin()); //For turning on isLoading console.log("Started"); //For fetching the data Object.keys(data).forEach(element => { //Here Data is an object to get the right