javascript - 空白页面即将到来，没有任何错误

Question

我知道 ReactJs 但我是 Redux 的新手。我正在尝试执行异步操作，就像我正在调用 API 并希望显示从中接收到的数据一样。当我在单个页面中实现 redux 时，即 Action 、reducer、容器都在一个页面上，它工作正常。单页代码如下:

import React from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { connect } from 'react-redux';

function fetchPostsRequest(){
  return {
    type: "FETCH_REQUEST"
  }
}

function fetchPostsSuccess(payload) {
  return {
    type: "FETCH_SUCCESS",
    payload
  }
}

function fetchPostsError() {
  return {
    type: "FETCH_ERROR"
  }
}

const reducer = (state = {}, action) => {
  switch (action.type) {
    case "FETCH_REQUEST":
      return state;
    case "FETCH_SUCCESS": 
      return {...state, posts: action.payload};
    default:
      return state;
  }
} 

function fetchPostsWithRedux() {
    return (dispatch) => {
    dispatch(fetchPostsRequest());
    return fetchPosts().then(([response, json]) =>{
        if(response.status === 200){
        dispatch(fetchPostsSuccess(json.data))
      }
      else{
        dispatch(fetchPostsError())
      }
    })
  }
}

function fetchPosts() {
  const URL = "api-url";
  let user = JSON.parse(localStorage.getItem('user'));
  return fetch(URL, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            api_token: user.api_token,
            type: 'task',
          })
        }).then(response => Promise.all([response, response.json()]));
}

class App extends React.Component {
    componentDidMount(){
    this.props.fetchPostsWithRedux()
  }
    render(){
      return (
            <ul>
                {
            this.props.posts && 
          this.props.posts.map((post,i) =>{
            return(
                <li key={i}>{JSON.parse(post.form_data).title}</li>
            )
          })
        }
        </ul>
    )
  }
}


function mapStateToProps(state){
    return {
    posts: state.posts
  }
}


let Container = connect(mapStateToProps, {fetchPostsWithRedux})(App);

const store = createStore(
    reducer,
    applyMiddleware(thunk)
);
ReactDOM.render(
    <Provider store={store}>
        <Container/>
    </Provider>,
    document.getElementById('app')
);

但是当我试图在不同的文件中制作 Action 、 reducer 、容器时，出现空白页面。控制台中没有错误，只有三个警告:

• 警告:通过主 React 包访问 PropTypes 已被弃用。请改用 npm 中的 prop-types 包。
• 警告:RouterContext:React.createClass 已弃用，并将在版本 16 中删除。请改用纯 JavaScript 类。如果您还没有准备好迁移，可以在 npm 上使用 create-react-class 作为直接替代品。
• 警告:自动设置 basename using 已弃用，并将在下一个主要版本中删除。的语义与基本名称略有不同。请在 createHistory 的选项中明确传递基本名称。

Store.js代码如下:

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import reducer from '../reducers/loginReducer';

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);
var routes =(
    <Provider store={store}>
      <Router history={browserHistory}>
        <Route path="/" component={Main}>
        <Route path="/testing" component={Testing}>
      </Router>
    </Provider>
);

Testing.js 代码如下:

import React from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import loginContainer from '../containers/loginContainer';

export default class Testing extends React.Component {

    render() {
        console.log("jgkj");
        return (
                <loginContainer />
        );
    }
}
module.exports = Testing;

loginContainer.js代码如下:

import React, {Component} from 'react';
import {  Link } from 'react-router';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { fetchPostsWithRedux,fetchPosts,fetchPostsError,fetchPostsSuccess,fetchPostsRequest } from '../actions/loginAction';

class loginContainer extends React.Component {
    componentDidMount(){
    this.props.fetchPostsWithRedux()
  }
    render(){
      return (
            <ul>
                {
            this.props.posts && 
          this.props.posts.map((post,i) =>{
            return(
                <li key={i}>{JSON.parse(post.form_data).title}</li>
            )
          })
        }
        </ul>
    )
  }
}


function mapStateToProps(state){
    return {
    posts: state.posts
  }
}
export default connect(mapStateToProps, {fetchPostsWithRedux})(loginContainer);

loginReducer.js 代码是:

import {
  FETCH_REQUEST,
  FETCH_SUCCESS,
  FETCH_ERROR
} from '../actions/loginAction';

export default function reducer (state = {}, action)  {
  switch (action.type) {
    case "FETCH_REQUEST":
      return state;
    case "FETCH_SUCCESS": 
      return {...state, posts: action.payload};
    default:
      return state;
  }
}

loginAction.js 代码如下:

export function fetchPostsRequest(){
  return {
    type: "FETCH_REQUEST"
  }
}

export function fetchPostsSuccess(payload) {
  return {
    type: "FETCH_SUCCESS",
    payload
  }
}

export function fetchPostsError() {
  return {
    type: "FETCH_ERROR"
  }
}

export function fetchPostsWithRedux() {
    return (dispatch) => {
    dispatch(fetchPostsRequest());
    return fetchPosts().then(([response, json]) =>{
        if(response.status === 200){
        dispatch(fetchPostsSuccess(json.data))
      }
      else{
        dispatch(fetchPostsError())
      }
    })
  }
}

export function fetchPosts() {
  const URL = "api-url";
  let user = JSON.parse(localStorage.getItem('user'));
  return fetch(URL, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            api_token: user.api_token,
            type: 'task',
          })
        }).then(response => Promise.all([response, response.json()]));
}

Answer 1

你的类 loginContainer 名称以小写字母开头，不应该这样，它应该以你的转换器的大写字母开头，更改为

 import {bindActionCreators} from 'redux';

 class LoginContainer extends React.Component {
    componentDidMount(){
    this.props.fetchPostsWithRedux()
  }
    render(){
      return (
            <ul>
                {
            this.props.posts && 
          this.props.posts.map((post,i) =>{
            return(
                <li key={i}>{JSON.parse(post.form_data).title}</li>
            )
          })
        }
        </ul>
    )
  }
}
function mapStateToProps(state){
    return {
    posts: state.posts
  }
}
function mapDispatchToProps(dispatch) {
     return bindActionCreators({fetchPostsWithRedux: fetchPostsWithRedux}, dispatch)

}
export default connect(mapStateToProps,mapDispatchToProps)(LoginContainer);

此外，您没有为您的操作使用 dispatch。利用 bindActionCreators 将您的操作绑定(bind)到分派(dispatch)

同样在Testing.js中使用

import LoginContainer from '../containers/loginContainer';

export default class Testing extends React.Component {

    render() {
        console.log("jgkj");
        return (
                <LoginContainer />
        );
    }
}
module.exports = Testing;