Redux Action Отправляет, но не отображает состояние - PullRequest
0 голосов
/ 24 октября 2019

У меня есть действие, которое я пытаюсь использовать в своем компоненте. Моя функция FetchPosts () будет работать и отображать ее состояние, но когда я использую свое другое действие FetchUserPosts (), я вижу в инструментах избыточного разработчика, что действиеотправляет, но в государстве ничего нет, а государство вообще не меняется.

Это может быть что-то с моими действиями, но я не уверен.

postAction.js

import { FETCH_POSTS, NEW_POSTS, FETCH_POST_FOR_APPROVAL, 
FETCH_POSTS_FROM_USER  } from './types';

export const fetchPostsFromUser = (id) => dispatch => {
Promise.all([fetch('http://10.6.254.22:5000/posts/1' + id)])
.then(([res1]) => { 
 return Promise.all([res1.json()]) 
})
.then(([posts]) => dispatch ({
  type: FETCH_POSTS_FROM_USER,
  payload: posts
 }));
}

Types.js

 export const FETCH_POSTS_FROM_USER = 'FETCH_POSTS_FROM_USER';

PostReducer.js

import { FETCH_POSTS, NEW_POSTS, FETCH_POST_FOR_APPROVAL, 
FETCH_POSTS_FROM_USER } from '../actions/types';

const initialState = {
items: [],
item: {}
}

export default function (state = initialState, action ){
switch(action.type) {
    case FETCH_POSTS:
        console.log('currently reducing')
    return{
        ...state, 
        items: action.payload
    } 
    case NEW_POSTS:
        return{
            ...state,
            item: action.payload
        }
    case FETCH_POST_FOR_APPROVAL:
        return{
            ...state,
            items: action.payload
        }
    case FETCH_POSTS_FROM_USER:
        return{
            ...state,
            items: action.payload
        }
    default:
        return state;
  }
}

Мой компонент Я хочу, чтобы эта функция работалатаким образом я могу отобразить реквизиты.

class ProfilePostBody extends Component {

 constructor(props){
 super(props)
 this.state = {
  commentBody: null,
  postId: null,
  giphyUrl: null,
  postPicture: null,
  userId: null,
  userIdto: null,
  userIdName: null,
  userIdtoName:null,
  // postBody: null,
  // giphyUrl: null,
  // userIdto: null,
  // userIdName: null,
  // userIdtoName:'Julio',

  displayGifPicker: false
 }
 }

componentDidMount(){
  this.props.fetchPostsFromUser();
  this.props.fetchPosts();

}



render () {
 return (
  // <Grid item xl={6}>
  <div>
    {this.props.posts.map((post, index) =>
      <PostBodyTemplate key={index} postId={post.id}  onSubmit= 
{this.handleSubmit} onChange={e => 
this.handleInputChange(e,post.id,post.userId,post.userIdName)} title= 
{post.title} postBody={post.postBody} 
           giphyUrl = {post.giphyUrl} userWhoPosted={post.userIdName} 
commentBody={post.commentBody} userIdtoName={post.userIdtoName} 
 userIdName={post.userIdName} />
       )} 
</div>
 )
}

}

ProfilePostBody.propTypes = {
fetchPostsFromUser: PropTypes.func.isRequired,
fetchPosts: PropTypes.func.isRequired,
posts: PropTypes.array.isRequired
}

const mapStateToProps = state =>({
posts: state.posts.items
})

export default connect(mapStateToProps, { fetchPosts, fetchPostsFromUser 
}) 
 (ProfilePostBody);

fetchPosts будет работать, но если я закомментирую это и попробую только fetchPostsFromUser (), это не будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...