Eine Aktion in react-redux verschicken

Question

Ich versuche eine Aktion mit react-redux zu versenden. Ich habe mir mehrere Tutorials angesehen und die Dokumentation gelesen, bin mir aber immer noch nicht sicher, was ich falsch mache. Hier

ist ein Code:

Container.js

import React from 'react'; 
import {connect} from 'react-redux'; 
import * as Actions from '../../../actions' 
import { bindActionCreators } from 'redux' 

class Searchbar extends React.Component { 
    // some constructor here 
    // some methods 
    onClickAction(){ 
     let {rememberUserQuery} = this.props.actions 
     console.log(this.props.userQuery) //empty as expected 
     rememberUserQuery(someInputDeclaredInsideTheMethod) 
     console.log(this.props.userQuery) //still empty instead of being updated 
    }; 
    // some rendor 
    } 
} 

function mapStateToProps(store) { 
    let {userQuery} = store.landingPgReducer; 
    return {userQuery} 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(Actions, dispatch) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Searchbar) 

Reducers.js

import { 
    REMEMBER_USER_QUERY 
} from '../actions' 

// Reducer to keep track of which form should be shown 
export function landingPgReducer(state = {userQuery:''}, action) { 
    switch (action.type) { 
    case REMEMBER_USER_QUERY: 
     console.log(state) //the reducer gets called and has blank state as expected 
     console.log(action) //the reducer is called with inputs as expected 
     return Object.assign({}, state, 
     action.userQuery 
    ) 
    default: 
     return state 
    } 
} 

Actions.js

export const REMEMBER_USER_QUERY = 'REMEMBER_USER_QUERY' 

export function rememberUserQuery(userQuery) { 
    console.log('rememberUserQuery',userQuery) //never getting to that console.log 
    return { 
    type: REMEMBER_USER_QUERY, 
    userQuery 
    } 
} 

P. S. Ich habe Reducer in einer anderen Datei kombiniert und einen Store erstellt, mit dem ich mich verbinde.

AKTUALISIERT: Ich versuche, den globalen Status zu ändern, so dass ich entsprechend in einer anderen Komponente, auf die ich navigiere, mithilfe von this.props.history.push ("/ reports") direkt nachdem ich den Reducer mit der Aktion aufgerufen habe. In dieser anderen Komponente hat sich der globale Status nicht geändert und der Wert von 'userQuery' ist immer noch '', wie die console.logs im Code anzeigen.

Answer 1

versuchen, das Objekt zur Änderung Sie passieren Object.assign() in der return-Anweisung Ihres Minderer auf die folgenden:

Reducers.js

import { REMEMBER_USER_QUERY } from '../actions' 

// Reducer to keep track of which form should be shown 
export function landingPgReducer(state = { userQuery: '' }, action) { 

    switch (action.type) { 

    case REMEMBER_USER_QUERY: 
     console.log(state) // the reducer gets called and has blank state as expected 
     console.log(action) // the reducer is called with inputs as expected 

     return Object.assign({}, state, { 
     userQuery: action.userQuery 
     }) 

    default: 
     return state 

    } 

} 

Wenn action.userQuery enthält nur eine Zeichenfolge aus einer Benutzereingabe, dann geben Sie nur den ursprünglichen Zustand zurück, da Sie gerade eine Zeichenfolge an Object.assign() übergeben, wenn Sie sho Übergeben Sie ein Objekt mit den Eigenschaften, die Sie überschreiben möchten.

Answer 2

Ändern Sie Ihren Reduzierer wie unten. Wenn Ihr 'action.userQuery' return Objekt verwenden

return { ...state, action.userQuery } 

sonst

return {...state, userQuery: action.userQuery } 

Reducer

import { 
    REMEMBER_USER_QUERY 
} from '../actions' 

// Reducer to keep track of which form should be shown 
export function landingPgReducer(state = {userQuery:''}, action) { 
    switch (action.type) { 
    case REMEMBER_USER_QUERY: 
     console.log(state) //the reducer gets called and has blank state as expected 
     console.log(action) //the reducer is called with inputs as expected 
     return {...state, 
     userQuery: action.userQuery 
     } 
    default: 
     return state 
    } 
}