Javascript Easy peasy useStoreActions不立即更新状态?

Javascript Easy peasy useStoreActions不立即更新状态?,javascript,reactjs,react-native,redux,easy-peasy,Javascript,Reactjs,React Native,Redux,Easy Peasy,假设这是我的代码 const donation = useStoreState( state => state.user.initialState.donationData, ) const setDonation = useStoreActions( actions => actions.donation.setDonation, ) setDonation({ amount: 1000000, message: 'donatio

假设这是我的代码

  const donation = useStoreState(
    state => state.user.initialState.donationData,
  )
  const setDonation = useStoreActions(
    actions => actions.donation.setDonation,
  )
  setDonation({
    amount: 1000000,
    message: 'donation from easy peasy',
    payment_method_id: '1',
    receiver_id: '1',
  })
  console.log('donation', donation)

当我尝试console.log时,在easy peasy initialState中不显示新的捐赠数据是一个用于初始化存储的不可变值。因此,您的设置捐赠函数将无法更改此值

这里显示了一个完整的(尽管是人为的!)示例,说明了您想要做的事情,并给出了一些注释,这些注释应该可以解释发生了什么:

import React, { Component } from "react";
import { render } from "react-dom";

import {
  useStoreState,
  action,
  createStore,
  StoreProvider,
  useStoreActions
} from "easy-peasy";

// Define your model
const donationModel = {
  donation: {},
  setDonation: action((state, payload) => {
    state.donation = payload;
  })
};

// Define you application store
const storeModel = {
  donations: donationModel
};

// Create an instance of the store
const store = createStore(storeModel);

const App = () => (
  // Wrap the Donation component with the StoreProvider so that it can access the store
  <StoreProvider store={store}>
    <Donation />
  </StoreProvider>
);

const Donation = () => {
  // Dispatch a setDonation action to add donation data to the store
  useStoreActions(actions =>
    actions.donations.setDonation({
      amount: 1000000,
      message: "donation from easy peasy",
      payment_method_id: "1",
      receiver_id: "1"
    })
  );

  // Retrieve data from the store using useStoreState
  const donationMessage = useStoreState(
    state => state.donations.donation.message
  );

  // Display the donation message returned from the store!
  return <>{donationMessage}</>;
};

render(<App />, document.getElementById("root"));
import React,{Component}来自“React”;
从“react dom”导入{render};
进口{
useStoreState,
行动,
createStore,
店主,
使用存储操作
}从“容易的豌豆”;
//定义您的模型
常量捐赠模型={
捐款:{},
设置捐赠:操作((状态、有效负载)=>{
state.generation=有效载荷;
})
};
//定义你的应用商店
常数存储模型={
捐赠:捐赠模式
};
//创建存储的实例
const store=createStore(storeModel);
常量应用=()=>(
//使用StoreProvider包装捐赠组件,以便它可以访问存储
);
常量捐赠=()=>{
//发送SetGenavation操作以将捐赠数据添加到存储
useStoreActions(actions=>
动作。捐赠。设置捐赠({
金额:1000000,
信息:“easy peasy捐赠”,
付款方式\ id:“1”,
接收者识别码:“1”
})
);
//使用useStoreState从存储中检索数据
const donationMessage=useStoreState(
state=>state.adivations.adivations.message
);
//显示从商店返回的捐赠信息!
返回{donationMessage};
};

render(.

我的回答对Nathan有帮助吗?你找到解决方案了吗?