Skip to content


@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


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="" />
      <FrameButton onClick={dispatch}>