Redux reducer初始状态问题

时间:2018-01-19 20:19:15

标签: reactjs redux react-redux redux-form

我有一个reducer,用于设置redux-form的状态,还有一个仅显示页面(不是表单)......

import { LOAD_USER_SUCCESS, LOAD_USERS_SUCCESS } from '../actions/types';

const INITIAL_STATE = { data: [] }

export default function (state = INITIAL_STATE, action) {  
  switch(action.type) {
    case LOAD_USER_SUCCESS:
      return { ...state, data: action.data };
    case LOAD_USERS_SUCCESS:
      console.log('LOAD_USER_SUCCESS');
      return { ...state, data: action.data };
    default:
      return state;
  }
}

你可以看到我设置了一个初始状态,我这样做是因为否则只显示页面在获取完成之前抛出错误:

TypeError:无法读取undefined的属性'map'(在下面的'this.props.users'中抛出)...

class Users extends React.Component {

  componentDidMount() {
        this.props.loadUsers();
  }

  render() {

    return (
      <PageWrapper>
          <table className="w-full text-left table-collapse">
            <thead>
              <tr className="text-sm text-grey-darker bg-grey-lightest">
                <TableTH name="Name" />
                <TableTH name="Email" />
              </tr>
            </thead>

            <tbody>
             {this.props.users.map((user, i) => (
                <UserListItem firstName={user.profile.firstName} lastName={user.profile.lastName} email={user.email} key={i} />
              ))}
            </tbody>
          </table>
      </PageWrapper>
    );
  }
}

function TableTH(props) {
    return (
        <th className="p-2">{props.name}</th>
    )
}

function mapStateToProps(state, props) {  
  if(state.user.data) {
    return { users: state.user.data }
  } else {
    return {};
  }
}

export default connect(mapStateToProps, { loadUsers })(Users);  

但是redux-form填充了相同的初始状态(没有内容),并且在fetch完成时不会更新,因为它是不可变的。

如果我在reducer中删除了INITIAL状态,则redux-form会完美填充,但是我得到上面提到的'map'错误。

以下是表格:

let UserForm = props => {

  const { handleSubmit, onSubmit } = props;

    return (
    <form onSubmit={handleSubmit(onSubmit)}>

            <FormItem
                label = { <label htmlFor="firstName">First Name</label> }
                field = { <Field name="firstName" type="text" placeholder="First name" component="input" className="w-full"/>} 
            />

            <FormItem
                label = { <label htmlFor="lastName">Last Name</label> }
                field = { <Field name="lastName" type="text" placeholder="Last name" component="input" className="w-full"/> }
            />

            <FormItem
                label = { <label htmlFor="email">Email</label> }
                field = { <Field name="email" type="text" placeholder="Email" component="input" className="w-full"/>}
            />

            <FormFooter
                left={ <Button href="/users" icon="fa-ban" text="Cancel" /> }
                right={ <button type="submit">Save</button> }
            />

        </form>
    )
}

UserForm = reduxForm({
  form: 'userForm'
})(UserForm)

function mapStateToProps(state) {  
  return { initialValues: state.user.data }
}

UserForm = connect(mapStateToProps
)(UserForm)

export default UserForm

这是我创建商店的地方:

const store = createStore(
  reducers,
  applyMiddleware(reduxThunk)
);

ReactDOM.render(
  <Provider store={store}>
        <App />
    </Provider>,
  document.getElementById('root')
)

registerServiceWorker();

这是主减速器:

import { combineReducers } from 'redux';  
import { reducer as formReducer } from 'redux-form';  
import authReducer from './auth_reducer';
import userReducer from './user_reducer';
import calendarReducer from './calendar_reducer';

const rootReducer = combineReducers({  
  auth: authReducer,
  form: formReducer,
  user: userReducer,
  calendar: calendarReducer
});

export default rootReducer; 

我应该如何更改它以满足两个页面?

2 个答案:

答案 0 :(得分:0)

处理此问题的一种方法是将INITIAL_STATE设置为{},然后在组件中,在没有用户时不渲染行:

class Users extends React.Component {

  componentDidMount() {
        this.props.loadUsers();
  }

  render() {
    const userRows = this.props.users ? 
      (
        <tbody>
          {this.props.users.map((user, i) => (
            <UserListItem firstName={user.profile.firstName} lastName={user.profile.lastName} email={user.email} key={i} />
           ))}
        </tbody>
      ) : null

    return (
      <PageWrapper>
          <table className="w-full text-left table-collapse">
            <thead>
              <tr className="text-sm text-grey-darker bg-grey-lightest">
                <TableTH name="Name" />
                <TableTH name="Email" />
              </tr>
            </thead>

           {userRows}
          </table>
      </PageWrapper>
    );
  }
}

function TableTH(props) {
    return (
        <th className="p-2">{props.name}</th>
    )
}

function mapStateToProps(state, props) {  
  if(state.user.data) {
    return { users: state.user.data }
  } else {
    return {};
  }
}

export default connect(mapStateToProps, { loadUsers })(Users); 

另一种方法是保持INITIAL_STATE目前的方式,并确保users Users中始终存在可重复的props密钥。您可以将mapStateToProps修改为:

function mapStateToProps(state, props) {  
  return { users: state.user.data ? state.user.data : [] };
}

答案 1 :(得分:0)

由于您没有提供完整的代码,我可以给您三个提示:

  1. 您应该将initialValues作为对象而非数组传递。因此,用户缩减器的初始状态应为const INITIAL_STATE = { data: {} }

  2. 你提到了一些关于不可变的东西。我没有看到你如何导入redux-form,但由于你的Redux状态不是一个不可变对象,你不应该从redux-form/immutable导入redux-form,而只能从redux-form导入。

  3. rootReducer没有redux-form reducer。

  4. Reducer应如下所示:

    import { reducer as formReducer } from 'redux-form';
    
    const rootReducer = combineReducers({  
      auth: authReducer,
      user: userReducer,
      form: formReducer
    });