私は<a href="https://github.com/davezuko/react-redux-starter-kit" rel="nofollow noreferrer">this starter kit</a>を使用していますし、以下のコードが<a href="https://github.com/elduderino87/react-redux-starter-kit" rel="nofollow noreferrer">this fork</a>上で見つけることができますReduxの

Question

で減速からの約束を返します。

カウンタ成分：

export const Counter = (props) => (
    <div style={{ margin: '0 auto' }} > 
    <h2>Counter: {props.counter}</h2> 
    <button className='btn btn-default' onClick={props.double}> 
     Double (Async) 
    </button> 
    </div> 
) 
Counter.propTypes = { 
    counter  : React.PropTypes.number.isRequired, 
    double : React.PropTypes.func.isRequired, 
    increment : React.PropTypes.func.isRequired 
} 

export default Counter 

とコンテナコンポーネント：

import { connect } from 'react-redux' 
import { increment, double } from '../modules/counter' 

import Counter from '../components/Counter' 

const mapDispatchToProps = { 
    increment :() => increment(1), 
    double:() => double() 
} 

const mapStateToProps = (state) => { 
    return { 
    counter : state.counter 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Counter) 

アクション：

export const COUNTER_INCREMENT = 'COUNTER_INCREMENT' 
export const COUNTER_DOUBLE = 'COUNTER_DOUBLE' 
// ------------------------------------ 
// Actions 
// ------------------------------------ 
export const increment = (value = 1) => { 
    return { 
    type: COUNTER_INCREMENT, 
    payload: value 
    } 
} 
export const double = (value = 0) => { 
    return { 
    type: COUNTER_DOUBLE, 
    payload: value 
    } 
} 

const doubleAsync = (state) => { 
    return (dispatch, getState) => { 
    return new Promise((resolve) => { 
     setTimeout(() => { 
     dispatch(increment(state)) 
     resolve() 
     }, 200) 
    }) 
    } 
} 

export const actions = { 
    increment, 
    double 
} 


const ACTION_HANDLERS = { 

    [COUNTER_INCREMENT]: function (state, action) { 
    return state + action.payload 
    }, 
    [COUNTER_DOUBLE]: (state, action) => { 
    return doubleAsync() 

    } 
    } 
} 

そして減速：

const initialState = 0 
export default function counterReducer(state = initialState, action) { 
    const handler = ACTION_HANDLERS[action.type] 
    return handler ? handler(state, action) : state 
} 

ただし、COUNTER_DOUBLEアクションハンドラはビューを更新していないようで、何も表示されません。

警告：失敗した小道具のタイプ：Counterに供給タイプfunction の無効な小道具counter、numberを期待私はこの警告が表示されます。

数字propTypeを定義しており、約束関数を返すとこのエラーが発生することがわかりました。私はmapDispatchToPropsを修正して、実行された約束関数を無駄に戻そうとしました。私は間違って何をしていますか？

私はここで検索したコンセンサスがすぐに実行された機能との約束をラップするReduxの-サンクを使用することのようですが、私は困難これが動作するようになってを抱えています。

助けていただけたら幸いです！

Answer 1

デフォルトでは、reduxはアクションがプレーンなオブジェクトであることを想定しています。いくつかの非同期コードを書いてお約束を返す場合は、何らかのミドルウェアを使用する必要がある場合は、redux-thunkが最適です。

Reduxの-サンクのREADMEページ

は実際には非常に文書化され、そしてそこに完全な例があります。基本的にこのようなあなたの店にReduxの-サンクミドルウェアを適用する必要があります：私はあなたが async action creatorsについてReduxのドキュメントを読むことをお勧めまた

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from './reducers'; 

const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
); 

、それはいくつかの素晴らしい例があります。

Answer 2

ちょうどまさにそのオリジナルのレポにthis commitを見ました。正確

export const doubleAsync =() => { 
    return (dispatch, getState) => { 
    return new Promise((resolve) => { 
     setTimeout(() => { 
     dispatch({ 
      type : COUNTER_DOUBLE_ASYNC, 
      payload : getState().counter 
     }) 
     resolve() 
     }, 200) 
    }) 
    } 
}