Redux商店在調度後沒有更新

Question

我想在渲染前獲取組件加載數據，所以我使用componentWillMount來調度我的getTransaction（）動作和由此產生的成功（我把redux-logger作爲中間件來知道成功或失敗）。 問題是我的redux商店沒有得到更新。我需要這些數據作爲道具傳遞給子組件。 的主要問題是在Transaction.js 這是我的代碼

Transaction.js

import React from "react"; 
import { connect } from "react-redux" 
import { withRouter } from 'react-router-dom'; 

import { getAuthenticatedUsername } from '../../utils/authorization' 
import Layout from "./../layout/Index" 
import Table from "../../components/table/Table" 

import { getTransaction } from "../../actions/transactionActions" 

import "./styles.scss" 

function mapStateToProps(state){ 
    return { 
    transaction: state.transaction 
    } 
} 
class Transaction extends React.Component { 

    componentWillMount() { 
    this.props.dispatch(getTransaction()); 
    } 

    render() { 
    console.log(this.props);//transaction not get updated, only get initial state from transactionActions 
    return (
     <Layout username={getAuthenticatedUsername()}> 
      <Table data={this.props.transaction}/> 
     </Layout> 
    ); 
    } 
} 

export default connect(mapStateToProps)(Transaction); 

client.js

import React from "react" 
import ReactDOM from "react-dom" 
import { Provider } from "react-redux" 
import { 
    HashRouter, 
    Link, 
    Route, 
    Redirect 
} from 'react-router-dom' 

import { isAuthenticated, setAuthorizationToken } from './utils/authorization' 

import store from "./store/store" 
import Login from "./pages/Login" 
import Register from "./pages/Register" 
import CatExpense from "./pages/isi/CatExpense" 
import CatIncome from "./pages/isi/CatIncome" 
import Transaction from "./pages/isi/Transaction" 

import "../styles/styles.scss" 

setAuthorizationToken(localStorage.jwtToken); 

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    isAuthenticated() ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/login', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

ReactDOM.render(
    <Provider store={store}> 
    <HashRouter> 
     <switch> 
     <Route exact path="/" component={Login}/> 
     <Route path="/login" component={Login}/> 
     <Route path="/register" component={Register}/> 
     <PrivateRoute path="/transaction" component={Transaction}/> 
     <PrivateRoute path="/catincome" component={CatIncome}/> 
     <PrivateRoute path="/catexpense" component={CatExpense}/> 
     <Redirect path="*" to="/"/> 
     </switch> 
    </HashRouter> 
    </Provider>, document.getElementById('app')); 

store.js

個

import { applyMiddleware, createStore } from "redux"; 
import axios from "axios"; 
import { createLogger } from "redux-logger"; 
import thunk from "redux-thunk"; 
import promise from "redux-promise-middleware"; 

import reducer from "../reducers/index"; 

const middleware = applyMiddleware(promise(), thunk, createLogger()); 
export default createStore(reducer, middleware); 

transactionReducer.js

const initialState = { 
    isFetching: false, 
    isSuccess: false, 
    transaction: {} 
} 
export default function reducer(state = initialState, action) { 
    switch (action.type) { 
    case "GET_TRANSACTION_PENDING": { 
     return { ...state, isFetching: true } 
     break; 
    } 
    case "GET_TRANSACTION_REJECTED": { 
     return { ...state, isFetching: false, error: action.payload } 
     break; 
    } 
    case "GET_TRANSACTION_FULFILLED": { 
     return { ...state, isSuccess: true, transaction: action.payload } 
     break; 
    } 
    } 
    return state; 
} 

transactionActions.js

import axios from "axios" 
import jwt from "jsonwebtoken" 
import { isAuthenticated } from '../utils/authorization' 

export function getTransaction(){ 
    isAuthenticated(); 
    return function(dispatch) { 
    axios.get("http://localhost:8000/listTransaction") 
     .then((response) => { 
     dispatch({type: "GET_TRANSACTION_FULFILLED", payload: response.data}) 
     }) 
     .catch((err) => { 
     dispatch({type: "GET_TRANSACTION_REJECTED", payload: err}) 
     }) 
    } 
} 

Answer 1

我發現自己的問題。其實數據得到更新，只是晚了一點。在檢索數據之前，數據已經作爲道具傳遞給子組件，其中子組件映射那些爲空的數據。這就是導致問題的原因。 所以我把驗證如果null渲染爲空，否則渲染數據。 子組件獲取數據後，它會自動重新顯示數據。

Answer 2

兩件事情。首先，您應該根據React文檔發送componentDidMount中的操作。 https://facebook.github.io/react/docs/react-component.html#componentdidmount

其次，你需要終極版的mapDispatchToProps()功能傳遞給你的connect，在傳遞的實際行動。

const mapDispatchToProps = (dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch(toggleTodo(id)) 
    } 
    } 
    } 

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp) 

What is mapDispatchToProps?

https://github.com/reactjs/react-redux/blob/master/docs/api.md