useFramesReducer

@param reducer a function taking a state and action and returning another action. This reducer is always called in the Frame to compute the state by calling it with the previous Frame + action @param initialState the initial state to use if there was no previous action @param initializerArg the previousFrame object to use to initialize the state @returns An array of [State, Dispatch] where State is your reducer state, and dispatch is a function that doesn't do anything atm

Usage

./app/page.tsx

 
import { FrameContainer, FrameImage, FrameButton, useFramesReducer, getPreviousFrame, validateActionSignature, FrameInput } from "frames.js/next/server";
 
const reducer = (state, action) => ({ count: state.count + 1 });
 
export default async function Home(props) {
  const previousFrame = getPreviousFrame(props.searchParams);
  await validateActionSignature(previousFrame.postBody);
  const [state, dispatch] = useFramesReducer(reducer, { count: 0 }, previousFrame);
 
  return (
    <FrameContainer postUrl="/frames" state={state} previousFrame={previousFrame}>
      <FrameImage src="https://picsum.photos/seed/frames.js/1146/600" />
      <FrameButton onClick={dispatch}>
        {state.count}
      </FrameButton>
    </FrameContainer>
  );
}