Помогите пожалуйста, вообще не понимаю откуда ошибка. Сижу и голову ломаю.
Использовала Create React App для создания приложения (из документации).
Хочу сначала подключить и более менее ориентировать в redux, а потом присоединить react-router и react-router-redux.
Просто для теста хотела сделать добавление нового юзера (action).
Протянула action в нужный компонент и тут ошибка:
Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
Я по разному протягивала action, пробовала bindActionCreators, по другим примера писала configureStore, не понимаю.
Помогите пожалуйста, в чём ошибка?
Все файлы ниже
appReducer.js
import {ADD_USER} from '../constans/appConstants';
const initialState = {
users: [
{
name: "Nastya",
age: 20
}
]
};
const appReducer = (state = initialState, action) => {
switch(action.type){
case ADD_USER: {
let newUser = {
name: action.name,
age: action.age
};
return {
...state,
users: state.users.push(newUser)
}
}
default:
return {
...state
}
}
};
export default appReducer;
Написала для добавления action
import {ADD_USER} from '../constans/appConstants';
export const addUser = (name, age) => {
return {
type: ADD_USER,
name: name,
age: age
}
};
Файл configureStore:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
const configureStore = initialState => (
createStoreWithMiddleware(rootReducer, initialState)
);
export default configureStore;
Точка входа в приложение (index.js):
import registerServiceWorker from './registerServiceWorker';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import AppContainer from './containers/AppContainer';
import configureStore from './store/configureStore';
const render = (Component) => {
ReactDOM.render(
<Provider store={configureStore()}>
<Component />
</Provider>,
document.getElementById('root'),
);
};
render(AppContainer);
registerServiceWorker();
Контейнер AppContainer:
import React from 'react';
import {connect} from 'react-redux'
import {addUser} from '../actions/appActions'
import App from '../components/App';
const Application = props => <App {...props} />;
const mapStateToProps = state => ({
appProps: state.appReducer
});
export default connect(mapStateToProps, {
addUser
})(Application);
Компонент App:
import React, {Component} from 'react';
import AddUserForm from './AddUserForm';
class App extends Component {
render() {
let {addUser} = this.props;
return (
<div>
<h1>Hello World</h1>
<hr/><br/><br/>
<AddUserForm addUser={addUser} />
</div>
)
}
}
export default App;
И компонент AddUserForm:
import React, {Component} from 'react';
class AddUserForm extends Component {
constructor(props){
super(props);
this.addNewUser = this.addNewUser.bind(this);
}
addNewUser() {
let {addUser} = this.props;
let name = this.inputUserName.value;
let age = this.inputUserAge.value;
addUser(name, age);
}
render() {
return (
<form>
<input ref={input => {this.inputUserName = input}} type="text" name="name" placeholder="Name new user"/>
<input ref={input => {this.inputUserAge = input}} type="text" name="age" placeholder="Age new user"/>
<button onClick={this.addNewUser} type="button">Add User</button>
</form>
)
}
}
export default AddUserForm;
Простой