通过将redux状态传递给react中的动态react-pose道具来移动div

Question

I've cobbled together this little sandbox to demonstrate: https://codesandbox.io/s/64xv97y45n

The purple div in the upper left hand corner is supposed to move as letters are typed. When a letter is typed, the currIndex (the currently active box) value on the redux store is incremented or decremented accordingly. The reducer then uses currIndex to compute the currentCoords or the div's new absolute position (for the purposes of attached sandbox, 'slightly more to the right'). The currentCoords store property is then passed on as a prop to control the dynamic pose of the purple div. But the div refuses to update its pose. Redux DevTools tells me currentCoords is updating properly, or at least well enough for it to move a little. What gives?

Relevant logic:

 const reducer = (state = initState, action) => {
      switch (action.type) {
        case "KEYPRESS":
          return {
            ...state,
            number: [...state.number, action.key],
            currIndex: ++state.currIndex,
            currentCoords: state.boxCoords[state.currIndex]
          };

<SNIP>

const Cursor = posed.div({
  visible: {
    opacity: 1,
    x: ({ xPos }) => xPos,
    y: ({ yPos }) => yPos
  },

  hidden: {
    opacity: 0
  }
});

<SNIP>



<Cursor
            className="cursor"
            initialPose="visible"
            xPos={this.props.currentCoords.x}
            yPos={this.props.currentCoords.y}
          />

Answer 1

If you want to transition your posed element without changing the current pose you need to pass a poseKey to react on. Also according to documentation of initialPose property:

Once the component mounts, it will transition from this pose into pose .

That is why have must pass pose property to the posed component otherwise initialPose will be reset. So basically <Cursor> component should be rendered like this:

<Cursor
   className="cursor"
   initialPose="visible"
   pose="visible"                        // you can hold the pose in your state and use it here like this.state.pose
   poseKey={this.props.currentCoords.x}
   xPos={this.props.currentCoords.x}
   yPos={this.props.currentCoords.y}
/>