Redux Persist state is not storing when fetching api using axios - reactjs

Question

I am fetching an api with axios and the action is being fired after the "persist/REHYDRATE" action resulting in the following
"redux-persist/autoRehydrate: 1 actions were fired before rehydration completed...."
If I delete a tweet one by one and then refresh my browser, it does not store the state. Can't seem to crack this..
Client.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')
);
tweetsReducer.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
}
tweetsActions.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}
}
layouts.js
import React from "react"
import { connect } from "react-redux"
import { fetchUser } from "../actions/userActions"
import { fetchTweets } from "../actions/tweetsActions"
import { deleteTweet } from "../actions/tweetsActions"
#connect((store) => {
return {
user: store.user.user,
userFetched: store.user.fetched,
tweets: store.tweets.tweets,
};
})
export default class Layout extends React.Component {
componentWillMount() {
this.props.dispatch(fetchUser())
this.props.dispatch(fetchTweets())
}
fetchTweets() {
//this.props.dispatch(fetchTweets())
}
deleteTweet(idx, e) {
this.props.dispatch(deleteTweet(idx))
}
render() {
const { user, tweets, i } = this.props;
//console.log(this.props)
const mappedTweets = tweets.map((tweet, i) => <li key={i}>{tweet.text}<button onClick={this.deleteTweet.bind(this, i)}>delete</button></li>)
return <div>
<h1>{user.name}</h1>
<ul>{mappedTweets}</ul>
</div>
}
}
UPDATE AND SAME ISSUE:
I tried replacing "componentWILLMount() with componentDidMount()" and the issue still occurs. See logged output:

Answer 1

Move your fetchTweets and fetchUser calls to componentDidMount, otherwise all your code is executed synchronously: from the store being created to your Layout being instantiated and rendered.
componentWillMount is called before render, while componentDidMount is called after the component has been rendered for the first time.