Добрый день.
Не так давно взялся за изучение react.
Есть задача.
Ссылка:
https://codepen.io/daynin/pen/KXemyg
Я собрал у себя код на node js, сборка webpack.
Вот сама компонента:
// Slomux - реализация Flux, в которой, как следует из нвазвания, что-то сломано.
// Нужно выяснить что здесь сломано
import ReactDOM from 'react-dom';
import React from 'react';
//import {createStore} from 'redux';
const createStore = (reducer, initialState) => {
let currentState = initialState
const listeners = []
const getState = () => currentState
const dispatch = action => {
currentState = reducer(currentState, action)
listeners.forEach(listener => listener())
}
const subscribe = listener => listeners.push(listener)
return { getState, dispatch, subscribe }
}
// reducers
const reducer = (state = [], action) => {
switch(action.type) {
case ADD_TODO:
state.push(action.payload)
return state
default:
return state
}
}
const store=createStore(reducer, []);
const connect = (mapStateToProps, mapDispatchToProps) =>
Component => {
return class extends React.Component {
render() {
return (
<Component
{...this.props}
{...mapStateToProps(store.getState(), this.props)}
{...mapDispatchToProps(store.dispatch, this.props)}
/>
)
}
componentDidMount() {
store.subscribe(this.handleChange)
}
handleChange = () => {
this.forceUpdate()
}
}
}
class Provider extends React.Component {
componentWillMount() {
window.store = this.props.store
}
render() {
return this.props.children
}
}
// APP
// actions
const ADD_TODO = 'ADD_TODO'
// action creators
const addTodo = todo => ({
type: ADD_TODO,
payload: todo,
})
// components
class ToDoComponent extends React.Component {
state = {
todoText: ''
}
render() {
return (
<div>
<label>{this.props.title || 'Без названия'}</label>
<div>
<input
value={this.state.todoText}
placeholder="Название задачи"
onChange={this.updateText}
/>
<button onClick={this.addTodo}>Добавить</button>
<ul>
{this.props.todos.map((todo, idx) => <li>{todo}</li>)}
</ul>
</div>
</div>
)
}
updateText(e) {
const { value } = e.target.value
this.setState({todoText: value})
//this.state.todoText = value
}
addTodo() {
this.props.addTodo(this.state.todoText)
this.setState({todoText: ''})
//this.state.todoText = ''
}
}
const ToDo = connect(state => ({
todos: state,
}), dispatch => ({
addTodo: text => dispatch(addTodo(text)),
}))(ToDoComponent)
// init
let Slomux = ReactDOM.render(
<Provider store={createStore(reducer, [] )}>
<ToDo title="Список задач"/>
</Provider>,
document.getElementById('app')
)
export default Slomux;
Подключил ее для вывода:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Slomux from './tasks/slomux.js';
ReactDOM.render(<Slomux />, document.getElementById('app'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
Пока выдает, что не может проставить состояние, видимо не правильно пробрасываю контекст в компоненте:
Подскажите как решить задачу или что почитать на эту тему.
Сложный