import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
state（Reduxのストア）ルート低減reducers/index.jsから来たと実際にreduxのcombineReducersユーティリティを使用して、他の全ての減速の組み合わせを表す単一減速（オブジェクト）である：
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
const todoApp = combineReducers({
todos,
visibilityFilter
})
export default todoApp
あなたが見ることができるように、todos減速機があります。だからこそmapStateToPropsの中ではstate.todosのように呼びます。
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
actions/index.js内部のそれのためにこのアクションの作成者：それは新しいtodoと新しい状態を返しますタイプ'ADD_TODO'の各アクションに
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
case 'TOGGLE_TODO':
return state.map(todo =>
(todo.id === action.id)
? {...todo, completed: !todo.completed}
: todo
)
default:
return state
}
}
export default todos
：ここ
はreducers/todos.js次のとおりです。 let nextTodoId = 0
export const addTodo = text => {
return {
type: 'ADD_TODO',
id: nextTodoId++,
text
}
}
したがって、h私はreduxの完全な流れです（私はこれがあなたのための明らかな部分であると仮定して、アクションを呼び出すボタンを省略しました）。
まあ、ほとんど完全な流れ、これのどれもAppをラップしindex.jsでそれに店舗を注入Provider HOCずに起こらなかったかもしれない：
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
今reduxstate変化、mapStateToPropsへの呼び出し新しいマップpropsが返されます。 connectはこれらの新しいpropsを渡し、これにより接続されたコンポーネントに新しいrenderコール（実際には反応ライフサイクル全体のフロー）がトリガーされます。
この方法では、UIはストアからの新しい新しいデータで再描画されます。
最後に見つからなかった 'mapStateToProps'関数を見てください。これは、コンポーネントの小道具をredux状態から更新し、状態が変化したときに再レンダリングをトリガします。 – xDreamCoding