在redux中调用操作后无法传递数据

Question

我是redux新手。我在我的项目中使用ES5。我刚刚开始在这里实现redux。

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"文件中定义的"Employees"条目时，我调用listEmployees()操作，我想在屏幕上列出员工。但是，当我运行项目时，在单击"Employees"时，操作被调用，稍后是reducer。但是，在header.js文件中，我看到了"this.props"。列表"已更新，但对于EmployeeTable也是如此，它是未定义的。请帮助。

Answer 1

您需要使用mapStateToProps使状态listingReducer作为EmployeeTable的prop可用

在你的employee.js文件中，在你的EmployeeTable React组件之后添加这个函数

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

还需要在同一个文件中导入rootReducer，并使用react-redux中的connect函数作为

export connect(mapStateToProps)(EmployeeTable);