reactjs - How to pass a variable from actions to component -


hooray have api answer console logged in action:

function listtemplates(specs) {     const payload = templatelist.post(specs);     return dispatch => dispatch({ ...types.get_templates, payload }); }  function apiresponse(response) {     const res = response;     console.log(res); }  const actions = {     listtemplates,     apiresponse, }; 

wait how send component processed , displayed?

update :

i have followed bit @ end of guide : http://redux.js.org/docs/basics/usagewithreact.html#implementing-container-components

and adapted (more complete (applymiddleware + store.jsx seperate file)) app setup.

so no have store available everywhere.

this gettemplate.jsx reducer :

import eventtypes '../eventtypes'; import actions '../../components/menu/actions';  const initialstate = {     templates: [], };  export default (state = initialstate, action) => {     switch (action.type) {         case eventtypes.get_templates_fulfilled.type:             const returnvalue = action.payload.body().data();             actions.apiresponse(returnvalue);             return state;         default:             return state;     } }; 

what missing? don't understand how works.

what need in template list component?

    case eventtypes.get_templates_fulfilled.type:         const returnvalue = action.payload.body().data();         actions.apiresponse(returnvalue); // ← ←         return state; 

redux reducers should return new state, not call other actions. use like:

return object.assign({}, state, { templates: returnvalue }) 

now redux save data in store. then, using connect function react-redux, can select data store , use in component.

function mapstatetoprops (state) {   return { templates: state.templates } } export default connect(mapstatetoprops)(templatescomponent) 

Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -