困っていること
react typescriptでstateの管理はreduxでしているのですがstateが更新できなくて困っています。
本来ならreact.jsで作ったものを勉強でtypescriptで作り直しているので更新できるはずなのですが...
ts
1import { SING_IN, SING_OUT } from './types'; 2import { initialState } from './initial_state'; 3 4const sessionReducer = { 5 currentUser(state = initialState, action: any) { 6 switch (action.type) { 7 case SING_IN: 8 return { 9 ...state, 10 ...action.payload 11 }; 12 case SING_OUT: 13 return { 14 ...state, 15 ...action.payload 16 }; 17 default: 18 return state; 19 } 20 } 21} 22export default sessionReducer;
実現したいこと
action.payload
にはちゃんと値は入ってきているのでstateを更新方法を知りたいです。
更新したいcase
はSIGN_IN
で、SIGN_IN
の中に処理は入ってきています。
追記
ts
1// actionです 2export const signInAction = (userState: any) => { 3 return { 4 type: SING_IN, 5 payload: { 6 user: { 7 userId: userState.userId, 8 firstName: userState.firstName, 9 lastName: userState.lastName 10 } 11 } 12 } 13};
ts
1// initial_stateです 2export interface State { 3 user: { 4 userId: string 5 firstName: string 6 lastName: string 7 } 8} 9 10export const initialState: State = { 11 user: { 12 userId: "", 13 firstName: "", 14 lastName: "" 15 } 16}
ts
1const dispatch = useDispatch(); 2// container 3<div className="form-control"> 4 <input type="submit" onClick={() => dispatch(signInAction( 5 { userId: 'xxx', firstName: 'test', lastName: 'user' }))} /> 6</div> 7
ts
1import { createStore, applyMiddleware, compose } from 'redux'; 2import thunk from "redux-thunk" 3import rootReducer from './reducers/root_reducers'; 4 5const storeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 6 7const store = createStore( 8 rootReducer, 9 storeEnhancers(applyMiddleware(thunk)) 10); 11 12export default store
回答1件
あなたの回答
tips
プレビュー