在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);