在 Immutablejs Map 中推入 List答案

【问题标题】：in Immutablejs Map push into List在 Immutablejs Map 中推入 List
【发布时间】：2018-01-27 20:49:05
【问题描述】：

我是一名正在学习 redux 的初学者开发人员。我正在使用 immutablejs 将对象类型数据添加到状态。当你按下 react 组件上的按钮时，测试数据（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

【问题讨论】：

尝试将return state.set('posts', posts.push( Map(action.payload.date) ))更改为return state.set('posts', posts.push( action.payload.date ))

标签： reactjs redux immutable.js

【解决方案1】：

List 不会深度转换您的数据，因此当您将对象数组传递给 List 时，您将得到一个包含普通 JS 对象的 List 对象。

在GET_ALL_POST_SUCCESS 中使用fromJS 而不是List

【讨论】：