2016-12-29 2 views
1

React와 Redux, Router가있는 응용 프로그램을 개발 중입니다. 하지만 이제 상태를 'mapStateToProps'함수의 상태로 설정 (업데이트) 할 수 없습니다. 감속기의 args '동작'이 '정의되지 않음'입니다. 이 문제의 원인은 mapStateToProps의 args가 어디에서 건 전달되지 않는다는 것입니다.React와 Redux를 사용할 때 상태가 정의되지 않은 객체입니다. 라우터

누구든지 mapStateToProps 함수에 상태 (클라이언트로부터의 데이터 입력)를 전달하는 방법을 알고 있습니까?

내 mapStateToProps 함수는 다음과 같이 간단하게 작성됩니다.

const mapStateToProps = state=>{ 
console.log(state); // this 'state' return undefined. 
return { 
loginform: state 
}}; 

export default connect(mapStateToProps)(LoginForm) 

여기 내 코드입니다.

지수

/index.js

let store = createStore(showUsername, 
window.devToolsExtension && window.devToolsExtension()); 

ReactDOM.render(
<Provider store={store}> 
<Router history={browserHistory}> 
    <Route component={AppNavBar}> 
     <IndexRedirect to='/login'> 
     <Route path='/login' component={LoginForm} /> 
    </Route> 
</Router> 
</Provider> 
, 
document.getElementById('root') 
); 

구성 요소

/Loginform.js

class LoginForm extends Component { 
    ... 
} 

const mapStateToProps = state=>{ 
console.log(state); // this 'state' return undefined. 
return { 
    loginform: state 
}}; 


export default connect(mapStateToProps)(LoginForm) 

ActionCreator

/actioncreator.js

export const showusername = 'showUsername'; 

    export const showUsername =(username,index)=>{ 
    console.log(username,index); 
    return{ 
     type:showusername, 
     username, 
     payload:index 
    } 

    }; 

#Reducer

/reducer.js

const initialState = { 
      username: '', 
      password: '', 
      submit: false, 
      //request: 'self', 
      showselectfield: false 
     }; 

    export default function showUsername(state = initialState, action) { 
    switch (action.type) { 
     case type.showusername: 
     return (
      Object.assign({},initialState ,{username:action.username,password:action.password}) 
     ); 

    default: 
     return state 
    } 
} 

감사합니다, 당신은 트리거 된 조치를 확인하여 감속기에서

답변

0

, 당신은 type.showusername 확인된다 하지만 스위치 케이스에 이미 action.type이 있으니 간단히 문자열 값 즉 0을 확인해야합니다

const initialState = { 
      username: '', 
      password: '', 
      submit: false, 
      //request: 'self', 
      showselectfield: false 
     }; 

    export default function showUsername(state = initialState, action) { 
    switch (action.type) { 
     case "showusername": 
     return (
      Object.assign({},state ,{username:action.username,password:action.password}) 
     ); 

    default: 
     return state 
    } 
} 
+0

고마워요! 대소 문자를 변경하고 잘 작동합니다. 그러나 여전히 '동작. 사용자 이름'은 정의되지 않았습니다. – yasu

+0

actionCreator console.log() 문에서 사용자 이름을 볼 수 있습니까 –

+0

console.log (사용자 이름)가 표시되면 정의되지 않음을 표시합니다. – yasu

관련 문제