Javascript 空白页没有任何错误
我知道Javascript 空白页没有任何错误,javascript,reactjs,react-redux,Javascript,Reactjs,React Redux,我知道ReactJs,但我是新来的Redux。我试图执行异步操作,就像调用API并希望显示从API接收的数据一样。当我在单个页面中实现redux时,即操作、减缩器、容器都在一个页面上,其工作正常。单页代码如下: import React from 'react'; import { render } from 'react-dom'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { cr
ReactJs
,但我是新来的Redux
。我试图执行异步操作,就像调用API并希望显示从API接收的数据一样。当我在单个页面中实现redux
时,即操作、减缩器、容器都在一个页面上,其工作正常。单页代码如下:
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')
);
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>
);
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);
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;
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()]));
}
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
代码如下:
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;
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()]));
}
您的类loginContainer名称以小写字母开头,但不应以大写字母开头。对于transpiler,它应以大写字母开头,更改为
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);
感谢您在
export default connect(mapstatetops,{(dispatch)=>{return{fetchPostsWithRedux:bindActionCreators(fetchPostsWithRedux,dispatch)}}}}(LoginContainer)中回答但给出语法错误代码>顺便说一句,当我尝试使用combinereducer
as:export default combinereducer({Login,Register,reducer})时,它再次变为空在这种情况下,您需要检查CombineReducer返回的组件是否用于创建存储我已经创建了一个indexreducer,并在其中使用combineReducerIn store.js导入indexreducer,然后使用它创建存储。还有其他错误吗。你能问一个单独的问题吗?也许其他人也可以提供他们的意见