我有一个化简器,可以为 redux 表单设置状态,也为仅显示页面(不是表单(设置状态......
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;
}
}
您可以在上面看到我设置了初始状态,我这样做是因为否则仅显示页面会在提取完成之前抛出错误:
类型错误:无法读取未定义的属性"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 填充相同的初始状态(无内容(,并且在获取完成后不会更新,因为它是不可变的。
如果我删除化简器中的初始状态,则 redux 表单会完美填充,但我会收到上面提到的"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;
我应该如何更改它以满足两个页面?
由于您没有提供完整的代码,我可以为您提供三个提示:
-
您应该将
initialValues
作为对象而不是数组传递。所以你的用户化简器的初始状态应该是const INITIAL_STATE = { data: {} }
-
你提到了一些关于不可变的东西。我不明白你是如何导入 redux-form,但由于您的 Redux 状态不是一个不可变的对象,你不应该从
redux-form/immutable
导入 redux-form,而只是从redux-form
导入
。 rootReducer
没有 redux 形式的化简器。
减速器应如下所示:
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers({
auth: authReducer,
user: userReducer,
form: formReducer
});
处理此问题的一种方法是将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
props
中始终存在可迭代的users
键。您可以将mapStateToProps
修改为如下所示:
function mapStateToProps(state, props) {
return { users: state.user.data ? state.user.data : [] };
}