in Immutablejs地図をプッシュリストにプッシュ

Question

私はreduxを勉強している初心者の開発者です。私はオブジェクト型データを状態に追加するためにimmutablejsを使用しています。反応コンポーネントのボタンを押すと、テストデータ（Map()）がList()にプッシュされます。しかし問題がある。ボタンを押すと、次のタイプのデータが入力され、ページがリフレッシュされるときはとなり、通常データで更新されます。なぜこうなった？私は本当にあなたの助けに感謝します。

Before Refresh

After Refresh

import { handleActions } from 'redux-actions' 
import axios from 'axios' 
import { Map, List } from 'immutable' 

let token = localStorage.token 
if (!token) 
    token = localStorage.token = Math.random().toString(36).substr(-8) 

let instance = axios.create({ 
    baseURL: 'http://localhost:5001', 
    timeout: 1000, 
    headers: {'Authorization': token} 
}) 

const GET_POST_PENDING = 'GET_POST_PENDING' 
const GET_ALL_POST_SUCCESS = 'GET_ALL_POST_SUCCESS' 
const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS' 
const GET_POST_FAILURE = 'GET_POST_FAILURE' 


//actions 

export const getPost = (postId) => dispatch => { 
    dispatch({type: GET_POST_PENDING}); 

    return instance.get('/posts').then(
    response => { 
     dispatch({ 
     type: GET_ALL_POST_SUCCESS, 
     payload: response 
     }) 
    } 
).catch((error) => { 
    dispatch({ 
     type: GET_POST_FAILURE, 
     payload: error 
    }) 
    }) 
} 


export const createPost =() => dispatch => { 
    dispatch({type: GET_POST_PENDING}) 

    return instance.post('/posts',{ 
    id: Math.random().toString(36).substr(-10), 
    timestamp: Date.now(), 
    title: 'test title', 
    body: 'test body', 
    category: 'redux', 
    author: 'minwoo', 
    deleted: false, 
    voteScore: 1 
    }).then(
    response => { 
     console.log(response) //check data 
     dispatch({ 
     type:CREATE_POST_SUCCESS, 
     payload: response 
     }) 
    } 
).catch((error) => { 
    dispatch({ 
     type: GET_POST_FAILURE, 
     payload: error 
    }) 
    }) 
} 

const initialState = Map({ 
    posts: List([]), 
    comments: List([]) 
}) 

私はコンソールがここにあってはならないことを知っています。しかし、ボタンを押すと、応答データが正しく送信されているかどうか確認したい。

//reducer 
export default handleActions({ 
    [GET_POST_PENDING]: (state, action) => { 
     return state; 
    }, 
    [GET_ALL_POST_SUCCESS]: (state, action) => { 
     console.log(action.payload.data)//for check data 
     return state.set('posts', List([...action.payload.data])) 
    }, 
    [CREATE_POST_SUCCESS]: (state, action) => { 
     const posts = state.get('posts') 
     return state.set('posts', posts.push(
      Map(action.payload.date) 
    )) 
    }, 
    [GET_POST_FAILURE]: (state, action) => { 
     return state 
    } 
}, initialState) 

以下のコードは上記のReactコンポーネントです。

import React from 'react'; 
import PropTypes from 'prop-types' 
import { List } from 'immutable'; 

const PostList = ({posts, PostActions: {getPost}}) => { 

    const postList = posts.map((post,i) => (
    <div key={i}> 
     {post.title} 
     <button>edit</button> 
     <button>delete</button> 
    </div> 
)) 

    return (
    <div className="PostList"> 
     {postList} 
    </div> 
) 
} 

PostList.proptypes = { 
    posts: PropTypes.instanceOf(List), 
    getPost: PropTypes.func 
} 

PostList.defaultProps = { 
    posts:[], 
    getPost:() => console.log('getPost is not defined') 
} 

export default PostList 

Answer 1

List深くあなたがListにオブジェクトの配列を渡すときに使用すると、プレーンなJSオブジェクトを含むListオブジェクトを取得します、あなたのデータを変換しません。 GET_ALL_POST_SUCCESS