React Reduxからバックエンドを呼び出す

Question

私は、データを表示するテーブルコンポーネントと、ドロップダウンリストを介してデータをフィルタするフィルタコンポーネントを含むreact-reduxアプリケーションを持っています。ドロップダウンを使用して選択するたびにバックエンドからデータを受け取れるようにアプリを変更する必要があります。私は以下を持っています：コンポーネント、レデューサー、アクションクリエータ、mapStateToProps、mapDispatchToProps。バックエンドと呼ぶべきですか？

Answer 1

あなたの行動でAPIクライアントを公開するためにredux midlewareを使用することができます。

マイReduxのミドルウェア：アクションで

export default function clientMiddleware(client) { 
    return ({ dispatch, getState }) => next => action => { 
    if (typeof action === 'function') { 
     return action(dispatch, getState); 
    } 

    const { promise, types, ...rest } = action; // eslint-disable-line no-redeclare 
    if (!promise) { 
     return next(action); 
    } 

    const [REQUEST, SUCCESS, FAILURE] = types; 
    next({ ...rest, type: REQUEST }); 

    const { auth } = getState(); 

    client.setJwtToken(auth.token || null); 

    const actionPromise = promise(client, dispatch); 
    actionPromise.then(
     result => next({ ...rest, result, type: SUCCESS }), 
     error => next({ ...rest, error, type: FAILURE }) 
    ).catch((error) => { 
     console.error('MIDDLEWARE ERROR:', error); 
     next({ ...rest, error, type: FAILURE }); 
    }); 

    return actionPromise; 
    }; 
} 

その使用は：

const SAVE = 'redux-example/widgets/SAVE'; 
const SAVE_SUCCESS = 'redux-example/widgets/SAVE_SUCCESS'; 
const SAVE_FAIL = 'redux-example/widgets/SAVE_FAIL'; 

export function save(widget) { 
    return { 
    types: [SAVE, SAVE_SUCCESS, SAVE_FAIL], 
    id: widget.id, // additionnal data for reducer 
    promise: client => client.post('/widget/update', { 
     data: widget 
    }) 
    }; 
} 

// in reducer: 
export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    case SAVE: 
     return state; 
    case SAVE_SUCCESS: 
     // you can use action.result and action.id here 
     return state; 
    case SAVE_FAIL: 
     // and you can use action.error and action.id here 
     return state; 
    default: 
     return state; 
    } 
} 

最後に、あなたはmapDispatchToPropsを使用してコンポーネントにこのアクションを渡す必要があります。私はダン・アブラモフ監督の例に基づいてReduxの-API-ミドルウェアhttps://github.com/agraboso/redux-api-middleware を使用し、あなたに

Answer 2

を助けていると期待して

。