Question

所以我一直在努力解决这一问题。

我认为我已经正确设置了所有内容，但是视图不会重新渲染，也不会更新道具。但是，我可以看到Redux Developer工具中的更改。我知道在Stackoverflow上还有其他类似问题，但没有一个对我有帮助。

我没看到什么吗？

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import Store from './store';
import * as serviceWorker from './serviceWorker';

const store = createStore(Store,  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ReactDOM.render(
    <Provider store={store} >
        <App />
    </Provider>
    , 
    document.getElementById('root'));

//actions.js
const initPurchases = (payload) => {
    return {
        type: "INITILIZE_PURCHASES",
        payload
    }
}

module.exports = {
    initPurchases,
}

// store.js

const initalState = {
    inventory: [],
}

const rootReducer = (state = initalState, action) => {
    switch(action.type) {
        case "INITILIZE_PURCHASES":
            state.purchases = [...action.payload];
            break;
        default:
            return state;
    }

    return state;
}

export default rootReducer

import React from 'react';
import { connect } from 'react-redux';
import actions from './actions';


class App extends React.Component {
    state = {}

    componentDidMount = () => {
        this.getPurchases();
    }


    getPurchases = async () => {
        // call to api which returns t
        this.props.initPurchases(t)
    }   

    render() {
        console.log(this.props.purchases) // Returns empty array []

        return (
            <div className="App">
                // Some view
            </div>
        );
    }
}

export default connect(
    (state) => {return {purchases: state.purchases}},
    actions,
)(App);

Logs from React Redux Developer Tools

有人可以帮我吗？我不知道这是怎么回事。我忽略了与我的问题无关的大多数事情（至少我不认为它们与问题有关）。我可以将整个仓库上传到github以查看更大的上下文

Answer 1

您的reducer需要返回新状态，否则状态保持不变：

const rootReducer = (state = initalState, action) => {
    switch(action.type) {
        case "INITILIZE_PURCHASES":
            return { ...state, purchases: [...action.payload] };
            break;
        default:
            return state;
    }

    return state;
}

Answer 2

我认为您需要实现以下内容：

import actions from './actions'

...

class App extends React.Component {

   ...

   componentDidMount = () => {
        this.props.initPurchases();
   }

   render() {
     ...
   }

}


const mapDispatchToApp = (dispatch) => (
  {
    initPurchases: () => (
      dispatch(actions.initPurchases())
    ),
  }
)

...

export default connect(
    (state) => {return {purchases: state.purchases}},
    mapDispatchToApp,
)(App);

这是因为您需要对商店执行dispatch操作

存储更改时，React Redux不会重新渲染

2 个答案: