首页 > 解决方案 > firestoreConnect 没有保持状态

问题描述

但是我正在使用firestoreConnect数据似乎从未写入状态。

const Shipping = ({adoptions,cart,addresses,totals}) => {
  console.log("Shipping Addresses ",addresses)
  return <ViewCheckout to="/" cta="Next: Proceed Pay" totals={totals}  >
            <AddressBook />
            {/* Add address section */}
            <AddressForm />
    </ViewCheckout>
}
const mapPropsToState = state => { 
  
  console.log("state",state)
  return{
    cart: state.cart,
    totals: totalsSelector(state),
    firebase: state.firebase,
    addresses: state.firestore.data.addresses
  }
}


export default compose(
  firestoreConnect(['addresses']),
  connect(mapPropsToState,null))(Shipping)

我看到redux-logger数据已加载,但是如果我读取状态,则永远不会加载数据。

我从状态添加日志:

  1. 当我派出行动时:"@@reduxFirestore/DOCUMENT_ADDED"该州拥有带有地址的 Firebase 数据。
  2. 然而。当我派出行动时:CREATE_ADDRESS_SUCCESS. Firebase 数据不再加载,处于以前的状态。

状态 redux 日志

我看到我的组件中永远不会出现 firebase 数据,以及我从 reducer 调度的任何下一个操作。

我可以看到,从addAddress函数记录状态也没有显示该状态的 firebase 数据。

export function addAddress(data){

    return (dispatch,getState, {getFirebase,getFirestore}) => {


       const firesotre = getFirestore()
        
       console.log("Action state",getState())

        return firesotre.add({collection:'addresses'},
            {...data,
                createdAt: new Date() 
            })
        .then( ()=> dispatch(createAddressSuccess()) )
        .catch( ()=> dispatch(addressError()) )
    }
}

日志数据:

日志数据

Redux Inspector 显示了两个实例。

  1. 一个实例状态捕获了我在项目中创建的所有操作。不使用 firebase 更新。
  2. 另一方面,状态的行为相反,只跟踪有关火力的状态。它不听应用程序的操作。

周围有什么提示吗?

标签: javascriptfirebasereduxgoogle-cloud-firestorereact-redux-firebase

解决方案


我自己解决了!

我忘记了我使用了一个 gatsby 插件来创建商店。

{
   resolve: `gatsby-plugin-react-redux`,
   options: {
     pathToCreateStoreModule: "./src/store",
      // [optional] - options passed to `serialize-javascript`
    //     // info: https://github.com/yahoo/serialize-javascript#options
    //     // will be merged with these defaults:
    //     serialize: {
    //       space: 0,
    //       // if `isJSON` is set to `false`, `eval` is used to deserialize redux state,
    //       // otherwise `JSON.parse` is used
    //       isJSON: true,
    //       unsafe: false,
    //       ignoreFunction: true,
    //     },
    //     // [optional] - if true will clean up after itself on the client, default:
    //     cleanupOnClient: true,
    //     // [optional] - name of key on `window` where serialized state will be stored, default:
    //     windowKey: "__PRELOADED_STATE__",
    //   },
    // },

使用 Gatsby 时请记住检查配置文件中的内容!!!否则,似乎代码已经夺走了自己的生命!


推荐阅读