Question

当我在代码中调用.file store = {store}时，它陷入无限循环并使ram充满，我删除了它，但需要调用Provider或wrap，然后尝试使用Provider store = { store}，而且仍然存在无限循环，我想使用redux进行项目，但仍然感到困惑，因此我尝试在youtube中观看一些视频，但出现此错误

这是我的App.js：

import React, { Component } from 'react';
import './App.css';
import Lister from './Lister';
import store from './store';
import { Provider } from 'react-redux';
import Footer from './Footer.js'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Provider store={store}> // this store make infinite loop in my browser
          <div>
            <Lister />
            <Footer />
          </div>
        </Provider>
      </div>
    );
  }
}

export default App;

这是我的商店：

import { createStore } from "redux";
import constants from './constants';

const initialState = {
    inputText: '',
    items: []
};

const reducer = (state = initialState, action) => {
    console.log('reducer', action);

    switch (action.type) {
        case constants.CHANGE_INPUT_TEXT:
            return Object.assign({}, state, {inputText: action.text });
        case constants.ADD_ITEM:
            return Object.assign({}, state, {
                items: state.items.concat(state.inputText),
                inputText: ''
            });
        case constants.DELETE_ITEM: 
            const copyOfItems = state.items.slice()
            copyOfItems.splice(action.index, 1)
            return Object.assign({}, state, {items: copyOfItems
            });
        default: 
            return state;
    }
}

const store = createStore(reducer);

export default store;

发生在我制作页脚时，页脚需要调用store = {store}，但是它卡在了浏览器中

这是我的Footer.js：

import React from 'react';
import { connect } from 'react-redux';

function Footer(props) {
    return (
        <Footer>
            Total count: {props.count}
        </Footer>
    )
}

const mapStateToProps = (state) => {
    return {
        count: state.items.length
    };
}

export default connect(mapStateToProps)(Footer);

Answer 1

您的问题不是store，而是Footer组件。

function Footer(props) {
    return (
        <Footer>
            Total count: {props.count}
        </Footer>
    )
}

您正在尝试在Footer组件内部渲染Footer组件。可能您尝试写<div>，但您的手指听不到您的声音。

我的React Redux应用程序出现无限循环

1 个答案: