在redux中調用動作後無法傳遞數據

Question

我是redux的新手。我在我的項目中使用ES5。我剛開始在這方面實施REDX。

main.js: 
let store = createStore(rootReducer); //Reducer defined in reducer.js file 
class RenderClass extends Component { 
    render() { 
    return (
     <Provider store={store}> 
      <Router history={hashHistory}> 
       <Route path="/" component={MainLayout}> 
        <Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}></Route> 
        ..... 
       </Route> 
      <Router> 
     </Provider> 
     ); 
    } 
} 

App.jsx: 
import * as Actions from './action-creator'; 
const MainLayout = React.createClass({ 
       render: function() { 

        const { dispatch, list } = this.props; 
        let actions = bindActionCreators(Actions, dispatch); 
        console.log(actions); 

        return (
         <div className="wrapper"> 
          <Header actions={actions} list={list} params={this.props.params} /> 

          {this.props.children} 
         </div> 
        ) 
       } 
      }); 

function select(state) { 
    return { 
     list: state.listingReducer 
    } 
} 
export default connect(select)(MainLayout); 

header.js: 
define(
    [ 
     'react', 
     'jquery', 
     'appMin' 
    ], 
    function (React, $) { 
     var Link = require('reactRouter').Link; 
     var Header = React.createClass({ 
      handleClick: function() { 
       //Action called here 
       this.props.actions.listEmployees(); 
      },  
      render: function() { 
       return (
        <ul className="sidebar-menu"> 
         <li> 
          <Link to={'/employees'} onClick={this.handleClick} list={this.props.list} actions={this.props.actions}><i className="fa fa-home"></i>Employees</Link> 
         </li> 
        </ul> 
       ); 
      } 
     }); 
     return Header; 
    } 
) 

employee.js: 
define(
    [ 
     'react', 
     'jquery', 
     'appMin' 
    ], 
    function (React, $) { 
     var EmployeeTable = React.createClass({ 

      render: function() { 
       if (this.props.list != undefined) { 
        var listItems = this.props.list.map(function (listItem) { 
         return (
          <tr key={listItem.id}> 
           <td> {listItem.name}</td> 
           ...... 
          </tr> 
         ); 
        }, this); 
        }) 
       } 
       return (
        <table> 
         <tbody> 
          {listItems} 
         </tbody>      
        </table> 
       ); 
      } 
     }) 
    } 
) 

action-creator.js: 
export function listEmployees() { 
    return { 
     type: types.LIST_EMPLOYEES 
    }; 
} 

reducer.js: 
function addEmployee(state, action) { 

    switch (action.type) { 

     case types.LIST_EMPLOYEES: 
     return {"id":"1", "name":"Stackoverflow"} 

     default: 
     return state 
    } 
} 

function listingReducer(state = [], action) { 
    switch (action.type) { 

     case types.LIST_EMPLOYEES: 
      return [ 
       ...state, 
       addEmployee(undefined, action) 
      ] 

     default: 
      return state; 
    } 
} 

const rootReducer = combineReducers({ 
    listingReducer 
}) 

export default rootReducer 

在點擊「header.js」的文件，我打電話類ListEmployees（）動作中定義的「僱員」的條目，我想在屏幕上列出的員工。但是，當我運行該項目時，單擊「員工」時，該操作被調用，稍後調用Reducer。但是，在header.js文件中，我看到「this.props.list」更新了，但是當涉及到EmployeeTable時，它是未定義的。請幫忙。

Answer 1

您需要使用mapStateToProps使狀態listingReducer可以作爲道具的EmployeeTable中

在你employee.js文件的EmployeeTable中後作出反應組件添加此功能

function mapStateToProps(state){ 
     return (list: state.listingReducer) 
} 

你也需要在同一個文件中導入rootReducer並利用react-redux的連接功能，因爲

export connect(mapStateToProps)(EmployeeTable);