React / Redux项目,通过我的api

时间:2017-10-10 21:39:04

标签: reactjs redux

https://github.com/ScorpIan555/snapshot

请参阅上面的回购,我包括了因为我正在努力简明地解释这个问题并且克隆它对于其他人来说可能更明显,除了我的行动/索引的第10行/第11行。 js文件(下面的代码),承诺从连接我的前端/后端的API返回空。我再次查看了我的后端,但之前测试过。我已经一遍又一遍地找不到问题。

让我知道人们有什么问题,我会相应地编辑这篇文章......

我的Account.js容器:

import React, { Component } from 'react'
import { Register } from '../view'
import { connect } from 'react-redux'
import actions from '../../actions'

class Account extends Component {

    register(registration){
        //this.props.signup(registration)
      console.log('REGISTER:  '+ JSON.stringify(registration))
      this.props.signup(registration)
    }

    render() {

     return(
       <div>
                Account Container
                {
           //(currentUser == null) ?
           //<Register onRegister={this.register.bind(this)} onLogin={this.login.bind(this)} /> //:
           //<Register /> //:
           <Register onRegister={this.register.bind(this) } /> //:
                    //<h2>{currentUser.username}</h2>
                }

            </div>
     )
   }
}// class Account

const stateToProps = (state) => {
  return {
    account: state.account +
    console.log(JSON.stringify(state.account))
  }
}

const dispatchToProps = (dispatch) => {
  return {
    signup: (params) => dispatch(actions.signup(params))
  }
}
export default connect(stateToProps, dispatchToProps)(Account)

注册道具是我的actions / index.js文件中定义的一个动作:

import constants from '../constants'
import { APIManager } from '../utils'

export default {

    signup: (params) => {
        console.log('post receive:  '  +JSON.stringify(params))
        return (dispatch) => {
            APIManager
            .post('/account/register', params)
            .then(response => {
                console.log('RESPONSE : Actions index.js: '+JSON.stringify(response))
                 dispatch({
                    type: constants.CURRENT_USER_RECEIVED,
                    user: response.user
                 })
            })// .then(response => {
            .catch((err) => {
                console.log('ERROR: '+err)
            })// .catch(err)
        }// return (dispatch)
    },

    updateCurrentLocation: (location) => {
        return {
            type: constants.CURRENT_LOCATION_CHANGED,
            location: location
        }
    },

    createPost: (params) => {
        return (dispatch) => {
            APIManager
            .post('/api/post', params)
            .then(response => {
                console.log('RESPONSE: '+JSON.stringify(response))

                // dispatch({
                //  type: constants.POSTS_RECEIVED,
                //  posts: response.results
                // })
            })//.then(response => {
            .catch((err) => {
                console.log('ERROR: '+err)
            })// .catch(err)
        }// return (dispatch)
    },

    fetchPosts: (params) => {
        return (dispatch) => {
            APIManager
            .get('/api/post', null)
            .then(response => {
                console.log('RESPONSE: '+JSON.stringify(response))
                dispatch({
                    type: constants.POSTS_RECEIVED,
                    posts: response.results
                })
            })
            .catch((err) => {
                console.log('ERROR: '+err)
            })// .catch(err)
        }// return (dispatch)
    },// fetchPosts,

    postsReceived: (posts) => {
        return {
            type: constants.POSTS_RECEIVED,
            posts: posts
        }

    }// postsReceived:

}// export default 

我的常量文件定义了CURRENT_USER_RECEIVED:

export default {

    CURRENT_USER_RECEIVED: 'CURRENT_USER_RECEIVED',

    CURRENT_LOCATION_CHANGED: 'CURRENT_LOCATION_CHANGED',

    POSTS_RECEIVED: 'POSTS_RECEIVED'

} 

我的商店:

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { postReducer, accountReducer } from '../reducers'

var store;

export default {
    configureStore: () => {
        const reducers = combineReducers({
            post: postReducer,
            account: accountReducer
        })

        store = createStore(
            reducers,
            applyMiddleware(thunk)
        )

        return store
    },

    currentStore: () => {
        return store
    }
} 

accountReducer定义:

import constants from '../constants'

var initialState = {
  user: null
}

export default (state = initialState, action) => {
    let updated = Object.assign({}, state)

    switch (action.type){
    case constants.CURRENT_USER_RECEIVED:
console.log('CURRENT_USER_RECEIVED reducer0 : ' + JSON.stringify(updated))
      console.log('CURRENT_USER_RECEIVED reducer1 : ' + JSON.stringify(action))
      console.log('CURRENT_USER_RECEIVED reducer2 : ' + JSON.stringify(action.username))

      updated['user'] = action.user
      return updated

        default:
            return updated

    }
}

1 个答案:

答案 0 :(得分:0)

愚蠢的错误,错误的资源变量