const toastrOptions = {
timeOut: 3000, // by setting to 0 it will prevent the auto close
// ...
}
export default function reducer(state=initialState, action) {
switch (action.type) {
case 'INCRE_TEST':
return state.int + action.int
default:
return state
}
}
И тут самое непонятное, как все это правильно собирать?
Не понимаю как подключить функцию к onClick
const mapDispatchToProps = dispatch => {
return {
onClick: int => {
dispatch(increTest(int))
}
}
}
const mapDispatchToProps = dispatch => {
return {
onClick: () => {
dispatch(increTest(1))
}
}
}
<button onClick={() => this.props.onClick(1)}>Click onClick</button>
function removeSomething(id) {
return { type: 'RemoveSomething_Action', payload: { id } }
}
function reducer(state = initialState, action) {
switch(action.type) {
//...
case 'RemoveSomething_Action':
return state.filter(el => el.id !== action.payload.id)
// ...
}
}
Ниже пример решения, но насколько оно иммутабельно?
может быть только одна чистая функция, которая возвращается по умолчанию, или можно плодить там (естественно самое необходимое) функции
const Item = props => (
<li>{props.data.title}</li>
)
const List = props => (
<ul>{props.items.map(item => <Item data={item} />}</ul>
)
const ConnectedList = connect(
state => ({ items: state.someItems })
)(List)
const Item = props => (
<li>{props.data.title}</li>
)
const ConnectedItem = connect(
(state, props) => ({ data: state.someItems.entities[props.id] })
)(Item)
const List = props => (
<ul>{props.items.map(id => <ConnectedItem id={id} />}</ul>
)
const ConnectedList = connect(
state => ({ items: state.someItems.ids })
)(List)
class MyComponent extends PureComponent {
clickHandler = () => {
// Так как это стрелочная функция - она будет забиндена при создании элемента (объекта)
}
render() {
return (
<SearchCollection onClick={this.clickHandler}/>
)
}
}
class MyComponent extends PureComponent {
constructor(props, context) {
super(props, context)
this.clickHandler = this.clickHandler.bind(this)
}
clickHandler() {
}
render() {
return (
<SearchCollection onClick={this.clickHandler}/>
)
}
}
но на клиенте, как раз наоборот, если дела обстоят с промисами, то каждая цепочка вызова функцию ждут друг-друга, т.е поочередно.
<Router>
<App>
<Route exact path="/" component={Home}/>
<Route path="/item0" component={Item0}/>
<Route path="/item1" component={Item1}/>
</App>
</Router>,
<Router basename="/joonline"/>
<App>
<Route exact path="/" component={Home}/>
<Route path="/item0" component={Item0}/>
<Route path="/item1" component={Item1}/>
</App>
</Router>,
value={this.state.value}
addTodo() {
// ...
this.setState({todoName: ''});
}
<Route path="/" component={App}>
<Route path="list" component={ListComponent} wrapperClass="wrapper--list" />
</Route>
render() {
// routes - это массив роутов для текущей локации
// если взять за основу конфигурацию роутов, которую я привел выше,
// то при переходе по пути /list в массиве будет два элемента.
const { children, routes } = this.props
const wrapperClass = (_.findLast(routes, route => !!route.wrapperClass) || {}).wrapperClass
return (
<div className={wrapperClass}>
{children}
</div>
)
}
let newState = Object.assign(state, {messages:action._data, loading:false});
newState === state // true в вашем случае
Интересует вопрос, что лучше подойдет для этого? Знаю , что angular2 в разы превосходит react по производительности, но большинство "хейтят" ангулар и идут в сторону React
затем обращаться к компонентам react ( возможно ли обратиться извне? )
В планах создать социальную сеть.
Интересует вопрос, что лучше подойдет для этого?