[Redux] Generating Containers with connect() from React Redux (FooterLink)
2016-02-12 03:15
651 查看
Code to be refactored:
First to create mapStateToProps, It is fairly common to use the container props when calculating the child props, so this is why props are passed as a second argument:
Second, we need to write mapDispatchToProp function:
Last, we need to create connect function, point to the Link compoment:
We can now use the filter link container component and specify just the filter, but the underlying link component will have received the calculated active and on-click values.
-------------
Code:
class FilterLink extends Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe(() => this.forceUpdate() ); } componentWillUnmount() { this.unsubscribe(); } render() { const props = this.props; const { store } = this.context; const state = store.getState(); return ( <Link active={ props.filter === state.visibilityFilter } onClick={() => store.dispatch({ type: 'SET_VISIBILITY_FILTER', filter: props.filter }) } > {props.children} </Link> ); } } FilterLink.contextTypes = { store: React.PropTypes.object };
First to create mapStateToProps, It is fairly common to use the container props when calculating the child props, so this is why props are passed as a second argument:
const mapStateToLinkProps = ( state, ownProps ) => { return { active: ownProps.filter === state.visibilityFilter } }
Second, we need to write mapDispatchToProp function:
const mapDispatchToLinkProps = ( dispatch, ownProps ) => { return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter }) } } }
Last, we need to create connect function, point to the Link compoment:
const FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link);
We can now use the filter link container component and specify just the filter, but the underlying link component will have received the calculated active and on-click values.
-------------
Code:
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed
};
default:
return state;
}
};
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t =>
todo(t, action)
);
default:
return state;
}
};
const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
const { combineReducers } = Redux;
const todoApp = combineReducers({
todos,
visibilityFilter
});
const { Component } = React;
const Link = ({
active,
onClick,
children,
}) => {
if (active) {
return <span>{children}</span>;
}
return (
<a href='#'
onClick={e => {
e.preventDefault();
onClick();
}}
>
{children}
</a>
);
};
const { connect } = ReactRedux;
const mapStateToLinkProps = ( state, ownProps ) => { return { active: ownProps.filter === state.visibilityFilter } }
const mapDispatchToLinkProps = ( dispatch, ownProps ) => { return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter }) } } }
const FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link);
const Footer = () => (
<p>
Show:
{' '}
<FilterLink filter='SHOW_ALL'>
All
</FilterLink>
{', '}
<FilterLink filter='SHOW_ACTIVE'>
Active
</FilterLink>
{', '}
<FilterLink filter='SHOW_COMPLETED'>
Completed
</FilterLink>
</p>
);
const Todo = ({
onClick,
completed,
text
}) => (
<li
onClick={onClick}
style={{
textDecoration:
completed ?
'line-through' :
'none'
}}
>
{text}
</li>
);
const TodoList = ({
todos,
onTodoClick
}) => (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
{...todo}
onClick={() => onTodoClick(todo.id)}
/>
)}
</ul>
);
let nextTodoId = 0;
let AddTodo = ({ dispatch }) => {
let input;
return (
<div>
<input ref={node => {
input = node;
}} />
<button onClick={() => {
dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text: input.value
})
input.value = '';
}}>
Add Todo
</button>
</div>
);
};
AddTodo = connect()(AddTodo);
const getVisibleTodos = (
todos,
filter
) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(
t => t.completed
);
case 'SHOW_ACTIVE':
return todos.filter(
t => !t.completed
);
}
}
const mapStateToTodoListProps = (state) => {
return {
todos: getVisibleTodos(
state.todos,
state.visibilityFilter
)
};
};
const mapDispatchToTodoListProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch({
type: 'TOGGLE_TODO',
id
});
}
};
};
const VisibleTodoList = connect(
mapStateToTodoListProps,
mapDispatchToTodoListProps
)(TodoList);
const TodoApp = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
const { Provider } = ReactRedux;
const { createStore } = Redux;
ReactDOM.render(
<Provider store={createStore(todoApp)}>
<TodoApp />
</Provider>,
document.getElementById('root')
);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script> <script src="https://fb.me/react-0.14.0.js"></script> <script src="https://fb.me/react-dom-0.14.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></script> </head> <body> <div id='root'></div> </body> </html>
相关文章推荐
- [Redux] Generating Containers with connect() from React Redux (AddTodo)
- React JSX语法说明
- React Native 开发。
- React-Native首次运行提示-ReferenceError-Can-t-find-variable-fbBatchedBridge
- [Redux] Generating Containers with connect() from React Redux (VisibleTodoList)
- [Redux] Passing the Store Down with <Provider> from React Redux
- React Native之Android应用开发IDE选项
- react-native环境配置——Android工程搭建
- ReactiveCocoa之基础篇
- ReactNative的编码规范造成的报错问题
- react-native之旅-1.安装
- reactjs学习笔记1
- React Native 之 main.jsbundle生成方法
- React Native-目前最火的前端技术
- React-Native学习指南集合版
- 一个资深iOS开发者对于React Native的看法
- React 从0开始 消息传递
- React-nativ windows 环境
- ReactNative之在iOS项目中手动加入ReactNative
- 【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)