반작용

Question

** 업데이트

내가 할 감속기를 업데이트했습니다 : 그것은 로깅

const initialState = { 
step: 1, 
indibiz: "individual", 
firstName:"first", 
lastName: "last", 
email: "email", 
choice: "null", 
emailNews: "no", 
dob: "1", 
mobileNumber: "1234567890", 
island: "St. Lucia", 
industry: "Astronaut", 
Skill: "Space Monkey", 
createClick: false 
} 
export default function (state = initialState, action) { 
switch (action.type) { 
case "SELECT_BUSINESS": 
    console.log(state); 
    return { ...state, indibiz: action.payloadEvent } 
    break; 

} 
return state; 
} 

지금 나는 내 CONSOLE.LOG에서 다음을 참조

있다고 초기 상태의 객체. 그러나 다음과 같은 동일한 구성 요소에 다음을 기록하려고 시도하면 : {console.log (this.props.selectindibusi.indibiz)} 그러면 정의되지 않은 값을 반환합니다. 감속기에 초기 값이 설정되어 있지 않습니까?

** 업데이트 나는 반응하여 현재 돌아 오는을 사용하고 내가 뭘 프로젝트에서 그것을 사용하는 방법을 배우게하기 위해 노력하고 있어요

이상. 문제는 내가 감속기를 완전히 이해하지 못하는 것 같은 느낌입니다. 다음은 내 감속기 인덱스 : 내 signupState 감속기에서

import {combineReducers} from 'redux'; 
import signupState from './reducer-signup.js'; 
import TestReducer from './testalertreducer.js'; 
import Selectindibusi from './reducer-select_indy_biz.js'; 

const allReducers = combineReducers({ 
    signupState: signupState, 
    selectindibusi: Selectindibusi, 
}); 

내가 가진 : 아래

export default function() { 
    return ({ 
    step: 1, 
    indibiz: "individual", 
    firstName:"first", 
    lastName: "last", 
    email: "email", 
    choice: "null", 
    emailNews: "no", 
    dob: "1", 
    mobileNumber: "1234567890", 
    island: "St. Lucia", 
    industry: "Astronaut", 
    Skill: "Space Monkey", 
    createClick: false 
    }); 
} 

는 작업입니다 :

export function selectindibusi(signupState, event) { 
    const SELECT_BUSINESS = "random string"; 
    console.log(signupState); 

    return { 
    type: "SELECT_BUSINESS", 
    payloadState: signupState, 
    payloadEvent: event.target.value 
    }; 
} 

을 그리고 아래에 해당 작업을 수신하는 감속기입니다 :

export default function (state = [], action) { 
    switch (action.type) { 
    case "SELECT_BUSINESS": 
    console.log(state); 

    return { ...state, indibiz: action.payloadEvent } 
    break;  
    } 

    return state; 
} 

나는 데이터가 전달되는 consolelog 수있는 행동

   <select className="formSelector100" onChange={this.props.selectindibusi.bind(this,this.props.signupState)}> 
       <option value="individual">Individual</option> 
       <option value="business">Business</option> 
       </select></label> 

:처럼 보이는 드롭 다운 상에 onChange가 액션에서이 작업을 caling. 문제는 signupState 감속기에서 데이터를 업데이트하지 않거나 액세스 할 수있는 새 객체를 만드는 것이 아닙니다.

내 구성 요소에서 {this.props.signupState.indibiz}를 표시하려고하면 값이 감속기의 기본값과 동일하지만 업데이트되지 않습니다. 나는 근본적인 무언가를 놓치고있는 것처럼 느껴진다. 나는 어떤 도움을 주겠다. 응답에 따르면

Answer 1

, 국가의 콘솔 로그는 하늘의 배열 반환 경우 :

export default function() { 
    return ({ 
    step: 1, 
    indibiz: "individual", 
    firstName:"first", 
    lastName: "last", 
    email: "email", 
    choice: "null", 
    emailNews: "no", 
    dob: "1", 
    mobileNumber: "1234567890", 
    island: "St. Lucia", 
    industry: "Astronaut", 
    Skill: "Space Monkey", 
    createClick: false 
    }); 
} 

이 상태로 설정되어 있지 않습니다. 당신이 당신의 signupState 감속기 지금 당신은 당신의 감속기는 따라서 올바른 초기 상태를 수신하지 않습니다는 설정을 가지고 방법으로

export default function (state = initialState, action) { 
    switch (action.type) { 
    case "SELECT_BUSINESS": 
     console.log(state); 
     return { ...state, indibiz: action.payloadEvent } 
    break;  
    } 

    return state; 
} 

에 다음

const initialState = { 
    step: 1, 
    indibiz: "individual", 
    firstName:"first", 
    lastName: "last", 
    email: "email", 
    choice: "null", 
    emailNews: "no", 
    dob: "1", 
    mobileNumber: "1234567890", 
    island: "St. Lucia", 
    industry: "Astronaut", 
    Skill: "Space Monkey", 
    createClick: false 
    } 

및입니다 일을해야 어떻게 왜 상태가 생각 하늘의 배열