CODEWITHSUNDEEP
reactjsreduxreact-reduximmutability
apttap
apttap

Reputation: 468

React-Redux State Update StaggeredMotion Render Error

I have a react-redux app, with thunk & router

I'm fetching information, and the initial fetch and render works fine. I'm using the same reducer to update when the client filters information (filtering is accomplished on the server).

On fetching new data, my render method is failing at the if statement below:

const keys = ['key1', 'key2', 'key3', 'key4'];

const els = keys.map((d, i) => {
  if (this.props.item[d] > 0) {
    return (...)
  }
});

If it makes a difference, this ^ render method is getting the props passed down from container elements. It's direct parent is using TransitionMotion to render the element:

EDIT I've found the issue, it's doesn't seem to be updating demoStyles in the below function:

let demoStyles = this.props.demo.map((d, i) => {
  return (
    {right: 100, opacity: 0}
  )
})
return (
  <div style={this.props.config}>
    <StaggeredMotion
    defaultStyles={demoStyles}
    styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
      return i === 0
        ? { right: spring(0), opacity: spring(1)}
        : {
            right: spring(prevInterpolatedStyles[i - 1].right, { stiffness: 700, damping: 35 }), opacity: spring(prevInterpolatedStyles[i - 1].opacity, { stiffness: 700, damping: 35 }),
          };
    })}
  >
    {interpolatingStyles =>
      <article>
        {interpolatingStyles.map((style, i) => {
          const barStyles = {
            right: style.right,
            opacity: style.opacity
          }
          return (<DemoLineItem styleConfig={barStyles} item={this.props.demo[i]} demoName={this.props.demoName} key={'demoLine'+i}/>)
        })}
      </article>
    }
    </StaggeredMotion>
  </div>

From my redux logging I can see that fetch works, and the new state object looks like it should. Both the demoStyles generated in component going in to react-motion are being updated, and the props.demo from redux is being updated.

But from my logs it looks like it begins rendering before the action is complete in Redux. It renders the first element in the list, and then it throws an undefined, and the fetch_completes, which doesn't make sense to me.

Console Screenshot

My reducer looks like this:

export function dist(state = [], action) {
    switch (action.type) {
        case 'DIST_FETCH_COMPLETE':

        let demos = Object.keys(action.survey).sort().map((d, i) => 
                    {return {...someConfig object I built...}});

            return {
              ...state,
              dist: action.survey,
              demos
            };
        default:
            return state;
    }
}

Edit: Here's my fetch action

export function fetchDist(url) {
    return (dispatch) => {
        dispatch(distLoading(true));

    fetch(url, {
     method: 'GET',
     headers: { ...}
    }).then((response) => {
            dispatch(distLoading(false));
            return response;
        })
        .then((response) => response.json())
        .then((dist) => dispatch(distFetchComplete(dist)))
        .catch(() => dispatch(distError(true)));
};
}

error is really simple:

export function distError(bool) {
  return {
    type: 'DIST_ERROR',
    error: bool
   }
}

export function distLoading(bool) {
  return {
    type: 'DIST_LOADING',
    loading: bool
  }
}

export function distFetchComplete(survey) {
  return {
    type: 'DIST_FETCH_COMPLETE',
    survey
  }
}

Upvotes: 0

Views: 64

Answers (1)

apttap
apttap

Reputation: 468

It's a limitation of react-motion's StaggeredMotion

It only works on fixed length arrays, you can add a key={arr.length} to get it re-render.

Otherwise default styles list will not update, so it's trying to render an element that's no longer in the list.

Upvotes: 0

Related Questions