2017-12-31 64 views
0

私は初心者です。今はすべてが混乱しています。私は店を作り、店に新しい価値を送りたいと思っていますが、それはうまくいかず、誰かを助けることができますか?おかげreduxの発送がうまくいきません

import {createStore, combineReducers} from 'redux'; 
import uuid from 'uuid'; 

const state={ 
    id:0, 
    numbers:[] 
} 

const randomNumber=()=>{...} 

//reducer 

const reducer=(state={},action)=>{ 
    switch(action.type){ 
     case 'ADD_NUMBER': 
     const newNumber={id:state.id+1, number:randomNumber()} 
     return { 
      ...state, 
      id:uuid(), 
      numbers:[...state.numbers,newNumber] 
     } 
    } 
} 

//store 
const store=createStore(reducer) 
store.subscribe(()=>{const state=store.getState}) 
console.log('new state should update, but it does not: ', state) 

const addNumber =()=>({type: 'ADD_NUMBER'}) 

//dispatch 
store.dispatch(addNumber()) 

は、この私の誤りであるenter image description here

+0

どのように機能しないかについてさらに詳しく説明できますか?何かエラーがありますか?エラーが表示されない場合は、減速機が呼び出されているかどうかを確認しましたか?何も起こりませんか? –

+0

はい私はエラーが発生しました。私はエラーで私の質問を更新しました。見てください、私はconsole.logを州で使用しましたが、 – Nhat

答えて

4

問題は、この行にあなたは空のオブジェクト{}に自分の状態を初期化してきた

const reducer = (state = {}, action) => { 

注意です。したがって、state.numbersを広げようとすると、numbersが初期状態で定義されていないため、このエラーが発生しています。

return { 
    ...state, 
    id:uuid(), 
    numbers:[...state.numbers,newNumber] 
} 

あなたの問題を再現する最小限の例、

const bad = (state = {}) => { 
 
    return { 
 
    numbers:[...state.numbers] 
 
    } 
 
} 
 

 
bad();

は、デフォルト値を使用して状態を初期化する必要があります。この問題を解決するには

const INITIAL_STATE = { 
    id:0, 
    numbers:[] 
} 


//reducer 
const reducer = (state = INITIAL_STATE, action) => { 

// Rest of the code 

const INITIAL_STATE = { 
 
    id:0, 
 
    numbers:[] 
 
} 
 
    
 
const good = (state = INITIAL_STATE) => { 
 
    return { 
 
    numbers:[...state.numbers] 
 
    } 
 
} 
 

 
console.log(good());

関連する問題