У меня возникла такая трудность, что мне не понятны некоторые моменты в редаксе.
Во-первых. У меня есть два компонента.
Первый:
class App extends React.Component {
onDoSomeStuff() {
this.props.onAddTask(this.entryInput.value)
}
render() {
//alert(this.props.entryText)
return (
<div>
<input type='text' ref={ (input) => this.entryInput = input } placeholder='Add your task here...' />
<Button onClick={this.onDoSomeStuff.bind(this)}>Add</Button>
<ul>
{
/*
this.props.entryText.map(
(track, index) =>
<li key={index}>{track}</li>
)
*/
this.props.entryText.map(
(task, index) =>
<Content key={index} value={task} />
)
}
</ul>
</div>
)
}
}
export default connect(state => ({entryText: state }),
dispatch => ({
onAddTask: (taskName) => {
dispatch({ type: 'ADD_TASK', payload: taskName });
}
})
)(App)
Второй
class Content extends React.Component {
constructor(props) {
super(props)
this.contentId = parseInt(this.props.children)
}
onDoSomeStuff() {
this.props.onDeleteTask(this.props.key)
console.log("hmmm", this.props.index)
}
render() {
//alert(this.props.entryText)
return (
<div>
{console.log(this.props.value)}
<b>{/*this.props.entryText[this.props.index*/this.props.value}</b>
<button onClick={this.onDoSomeStuff.bind(this)}>Delete</button>
</div>
)
}
}
export default connect(state => ({ }),
dispatch => ({
onDeleteTask: (taskId) => {
dispatch({ type: 'DELETE_TASK', payload: taskId });
}
})
)(Content)
Есть компонент App, он использует li-key, чтобы рендерить списком введенные пользователем сообщения. Используется в li-key другой дочерний компонент - Content. Оба они подключены к хранилищу. И ещё, у меня не выходит комбинировать редьюсеры.
Ну вот, например:
function addTask(state = [], action) {
switch (action.type) {
case 'ADD_TASK':
return [...state,
action.payload];
break;
default:
return state;
}
}
function deleteTask(state=[], action) {
switch (action.type) {
case 'DELETE_TASK':
return state.filter(word => word !== state[action.id]);
break;
default:
return state;
}
}
var reducers = combineReducers({addTask, deleteTask})
var store = createStore(reducers)
Но приложение крашится и выдаёт:
TypeError: this.props.entryText.map is not a function
App.render
src/App.js:29
26 | <li key={index}>{track}</li>
27 | )
28 | */
> 29 | this.props.entryText.map(
30 | (task, index) =>
31 | <Content key={index} value={task} />
32 | )
Он почему-то не видит переданный state.
Но если объединить оба редьюсера в один так:
function addTask(state = [], action) {
switch (action.type) {
case 'ADD_TASK':
return [...state,
action.payload];
//return state.concat(action.payload)
break;
case 'DELETE_TASK':
return state.filter(word => word !== state[action.payload]);
break;
default:
return state;
}
}
То добавление записей работает, но не удаление. Я не знаю как получить индекс переданного элемента в li-key, значение получаю через this.props.value, ключ так получить не могу.
В общем, не знаю где я тут накосячил, буду очень рад, если подскажите что не так.
Простой
