3

ORM，我可以向状态添加值，但是我无法从选择器中检索值。以下是代码。当我尝试添加新记录时，记录会保存在存储中，但是我无法从存储中将数据获取到表组件中。 以供参考 

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {createReducer} from 'redux-orm';
// Models
import orm from './redux-orm/models.js';
// other reducers
// application bootstrap
import './index.css';
import App from './App.jsx';
const rootReducer = createReducer(orm);

const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root'));
以供参考 
//model.js
import {ORM, Model, many, fk} from 'redux-orm';

import {
    SELECT_USER,
    CREATE_USER,
    UPDATE_USER,
    DELETE_USER
} from '../redux/action_constants';

class User extends Model {
    static reducer(action, User, session) {
        let {payload, type} = action;
        switch(type) {
            case CREATE_USER:
                let first_name = payload.first_name;
                let last_name = payload.last_name;
                let props = {first_name: first_name, last_name: last_name};
                User.create(props);    
                break;
            case SELECT_USER:
                break;
            case UPDATE_USER:
                break;
            case DELETE_USER:
                break;
            default:
                break;
        }
        return undefined;
    }
    toString() {
        return `User: ${this.first_name}`;
    }
}

User.modelName = 'User';
User.backend = {
    idAttribute: 'name',
};

const orm = new ORM();
orm.register(User);

export default orm;
以供参考 
//page.js
import React, { Component } from 'react';
import FormRedux from '../html_components/form.jsx';
import Table from '../html_components/table.jsx'


class FormWithTable extends Component {
    render() {
        return (
            <div className="w3-container">
                <FormRedux
                    onChange={this.handleChange}
                    handleSubmit={this.handleSubmit}
                ></FormRedux>
                <Table></Table>
            </div>
        )
    }
}

export default FormWithTable;
以供参考 
// form.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {createUser, selectUser, deleteUser, updateUser} from '../redux/actions';

function mapDispatchToProps(dispatch){
    return{
        createUser: user => dispatch(createUser(user))
    };
}

class FormTest extends Component{
    constructor() {
        super();
        this.state = {
            first_name: '',
            last_name: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event){
        this.setState({[event.target.id]: event.target.value});
    }
    handleSubmit(event){
        event.preventDefault();
        const {first_name, last_name} = this.state;
        this.props.createUser({first_name, last_name});     // action dispatch
        this.setState({first_name: "", last_name: ""});
    }
    render() {
        const {first_name, last_name} = this.state;
        return (  
            <form className="w3-container" onSubmit={this.handleSubmit}>
                <label className="w3-text-blue" ><b>First Name</b></label>
                <input className="w3-input w3-border" type="text" id="first_name" name="first_name" value={first_name} onChange={this.handleChange}></input>                
                <label className="w3-text-blue"><b>Last Name</b></label>
                <input className="w3-input w3-border" type="text" id="last_name" name="last_name" value={last_name} onChange={this.handleChange}></input>
                <button className="w3-btn w3-blue" type="submit">Register</button>            
            </form>
        )
    }
}

const FormRedux = connect(null, mapDispatchToProps)(FormTest);

export default FormRedux;
这是代码的问题部分，它不会从存储中检索数据。 
// Problem component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
    user,
    users
} from '../redux-orm/selectors';

export class Table extends Component{
    render() {
        let tBody;
        if(this.props.user_list !== undefined){
            tBody = this.props.user_list.map(user => {return <td>+user.first_name+</td>+<td>+user.last_name+</td>+<td></td>});
        }else {
            tBody = <tr><td>Empty</td><td>Empty</td><td>Empty</td></tr>; 
        }
        
        return (
        <div className="w3-container">
        <table className="w3-table-all">
            <thead>
                <tr className="w3-light-grey w3-hover-red">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Points</th>
                </tr>
            </thead>
            <tbody>
                {tBody}
            </tbody>
        </table>
        </div>
        )
    }
}

function stateToProps(state) {
    return {
        user_list: users(state)         
    };
};


export default connect(stateToProps)(Table);

import React from 'react';
import './App.css';
import './w3.css';
import FormWithTable from './page/form_with_table.jsx';

import {
  createUser,
  updateUser,
  selectUser,
  deleteUser
} from './redux/actions';

function App() {
  return (
    <div className="App">
      <FormWithTable></FormWithTable>
    </div>
  );
}

export default App;

多谢。

4

0 回答 0