Question

我正在使用axios获取api，并且在“persist / REHYDRATE”操作后触发了操作，导致以下操作 “redux-persist / autoRehydrate：在完成补液之前已经开了1个动作......”

如果我逐个删除推文然后刷新浏览器，它就不会存储状态。似乎无法解决这个问题。

Client.js

protected void getTestG6Ques(object sender, EventArgs e)
{
    // To do some thing.
}

tweetsReducer.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from "react-redux"
import { compose, applyMiddleware, createStore } from 'redux';
import logger from "redux-logger"
import thunk from "redux-thunk"
import promise from "redux-promise-middleware"
import {persistStore, autoRehydrate} from 'redux-persist'
import tweetApp from "./reducers"
import Layout from "./components/Layout"
import { REHYDRATE } from 'redux-persist/constants'
import createActionBuffer from 'redux-action-buffer'

//const middleware = applyMiddleware(promise(), thunk, logger())
let enhancer = compose(
  autoRehydrate({ log: true }),
  applyMiddleware(
    promise(), thunk, logger(), createActionBuffer(REHYDRATE)
  )
)
const store = createStore(
  tweetApp,
  enhancer
);
const persistConfig = {
  whitelist : ["tweets"]
};
persistStore(store, persistConfig);

render(
  <Provider store={store}>
    <Layout />
  </Provider>,
  document.getElementById('app')
);

tweetsActions.js

import {REHYDRATE} from 'redux-persist/constants'

export default function reducer(state={
    tweets: [],
    fetching: false,
    fetched: false,
    error: null,
  }, action) {

    switch (action.type) {
      case "persist/REHYDRATE": {
        const incoming = action.payload.tweets; // Carts is the name of the reducer
        if (incoming) return {...state, ...incoming}
      }
      case "FETCH_TWEETS": {
        return {...state, fetching: true}
      }
      case "FETCH_TWEETS_REJECTED": {
        return {...state, fetching: false, error: action.payload}
      }
      case "FETCH_TWEETS_FULFILLED": {
        return {
          ...state,
          fetching: false,
          fetched: true,
          tweets: action.payload,
        }
      }
      case "ADD_TWEET": {
        return {
          ...state,
          tweets: [...state.tweets, action.payload],
        }
      }
      case "UPDATE_TWEET": {
        const { id, text } = action.payload
        const newTweets = [...state.tweets]
        const tweetToUpdate = newTweets.findIndex(tweet => tweet.id === id)
        newTweets[tweetToUpdate] = action.payload;

        return {
          ...state,
          tweets: newTweets,
        }
      }
      case "DELETE_TWEET": {
        return {
          tweets: [
              ...state.tweets.slice(0, action.payload),
              ...state.tweets.slice(action.payload + 1)
          ],
        }
      }
    }

    return state
}

layouts.js

import axios from "axios";

export function fetchTweets() {
  return function(dispatch) {
    axios.get("http://rest.learncode.academy/api/test123/tweets")
      .then((response) => {
        dispatch({type: "FETCH_TWEETS_FULFILLED",  payload: response.data})
      })
      .catch((err) => {
        dispatch({type: "FETCH_TWEETS_REJECTED", payload: err})
      })
  }
}

export function addTweet(id, text) {
  return {
    type: 'ADD_TWEET',
    payload: {
      id,
      text,
    },
  }
}

export function updateTweet(id, text) {
  return {
    type: 'UPDATE_TWEET',
    payload: {
      id,
      text,
    },
  }
}

export function deleteTweet(id) {
  return { type: 'DELETE_TWEET', payload: id}
}

更新和同样的问题：我尝试用componentDidMount（）替换“componentWILLMount（）”，问题仍然存在。查看记录的输出：

Answer 1

将fetchTweets和fetchUser调用移至componentDidMount，否则所有代码都会同步执行：从正在创建的商店到正在实例化和呈现的布局。

在渲染之前调用

componentWillMount，而在第一次渲染组件之后调用componentDidMount。

使用axios获取api时，Redux Persist状态不存储

1 个答案: