Ytukyg

I have a redux saga setup which works fine. One of my dispatches is to create a new order, then once that has been created I want to do things with the updated state.

// this.props.userOrders = 



dispatch(actions.createOrder(object))



doSomethingWith(this.props.userOrders)

Since the createOrder action triggers a redux saga which calls an API, there is a delay, so this.props.userOrders is not updated before my function doSomethingWith is called. I could set a timeout, but that doesn't seem like a sustainable idea.

I have read the similar questions on Stack Overflow, and have tried implementing the methods where relevant, but I can't seem to get it working. I'm hoping with my code below that someone can just add a couple of lines which will do it.

Here are the relevant other files:

actions.js

export const createUserOrder = (data) => ({
type: 'CREATE_USER_ORDER',
data
})

Sagas.js

function * createUserOrder () {

  yield takeEvery('CREATE_USER_ORDER', callCreateUserOrder)

}



export function * callCreateUserOrder (newUserOrderAction) {

  try {

    const data = newUserOrderAction.data

    const newUserOrder = yield call(api.createUserOrder, data)

    yield put({type: 'CREATE_USER_ORDER_SUCCEEDED', newUserOrder: newUserOrder})

  } catch (error) {

    yield put({type: 'CREATE_USER_ORDER_FAILED', error})

  }

}

Api.js

export const createUserOrder = (data) => new Promise((resolve, reject) => {

  api.post('/userOrders/', data, {headers: {'Content-Type': 'application/json'}})

    .then((response) => {

      if (!response.ok) {

        reject(response)

      } else {

        resolve(data)

      }

    })

})

orders reducer:

case 'CREATE_USER_ORDER_SUCCEEDED':

   if (action.newUserOrder) {

      let newArray = state.slice()

      newArray.push(action.newUserOrder)

          return newArray

       } else {

       return state

   }

This feels like an XY Problem. You shouldn't be "waiting" inside a component's lifecycle function / event handler at any point, but rather make use of the current state of the store.

If I understand correctly, this is your current flow:

You dispatch an action CREATE_USER_ORDER in your React component. This action is consumed by your callCreateUserOrder saga. When your create order saga is complete, it dispatches another "completed" action, which you already have as CREATE_USER_ORDER_SUCCEEDED.

What you should now add is the proper reducer/selector to handle your CREATE_USER_ORDER_SUCCEEDED:

This CREATE_USER_ORDER_SUCCEEDED action should be handled by your reducer to create a new state where some "orders" property in your state is populated. This can be connected directly to your component via a selector, at which point your component will be re-rendered and this.props.userOrders is populated.

Example:

component

class OrderList extends React.PureComponent {

  static propTypes = {

    userOrders: PropTypes.array.isRequired,

    createOrder: PropTypes.func.isRequired,

  }



  addOrder() {

    this.props.createOrder({...})

  }



  render() {

    return (

      <Wrapper>

        <Button onClick={this.addOrder}>Add Order</Button>

        <List>{this.props.userOrders.map(order => <Item>{order.name}</Item>)}</List>

      </Wrapper>

    )

  }

}



const mapStateToProps = state => ({

  userOrders: state.get('userOrders'),

})



const mapDispatchToProps = {

  createOrder: () => ({ type: 'CREATE_ORDER', payload: {} }),

}



export default connect(mapStateToProps, mapDispatchToProps)(OrderList)

reducer

case 'CREATE_USER_ORDER_SUCCEEDED':

  return state.update('userOrders',

    orders => orders.concat([payload.newUserOrder])

  )

If you really do need side-effects, then add those side-effects to your saga, or create a new saga that takes the SUCCESS action.