Redux入门示例-TodoList

{
type: ACTION_TYPE,
text: “content”,
}

npm install --save react-redux

.
├── app                 #开发目录
|   |
|   ├──actions          #action的文件
|   |
|   ├──components       #内部组件
|   |
|   ├──containers       #容器组件
|   |
|   ├──reducers         #reducer文件
|   |
|   ├──stores           #store配置文件
|   |
|   └──index.js         #入口文件
|
├── dist                #发布目录
├── node_modules        #包文件夹
├── .gitignore
├── .jshintrc
├── server.js           #本地静态服务器
├── webpack.config.js   #webpack配置文件
└── package.json

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/App';
import configureStore from './stores/configureStore';
const store = configureStore();
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

import { createStore } from 'redux';
import rootReducer from '../reducers';
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState);
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers');
store.replaceReducer(nextReducer);
});
}
return store;
}

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import {
addTodo,
completeTodo,
setVisibilityFilter,
VisibilityFilters
} from '../actions';

import AddTodo from '../components/AddTodo';
import TodoList from '../components/TodoList';
import Footer from '../components/Footer';

class App extends Component {
render() {
const { dispatch, visibleTodos, visibilityFilter } = this.props;
return (
<div>
<AddTodo
onAddClick={text =>
dispatch(addTodo(text))
}
/>
<TodoList
todos={visibleTodos}
onTodoClick={index => dispatch(completeTodo(index))}
/>
<Footer
filter={visibilityFilter}
onFilterChange={nextFilter => dispatch(setVisibilityFilter(nextFilter))}
/>
</div>
);
}
}

App.propTypes = {
visibleTodos: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired,
completed: PropTypes.bool.isRequired
})),
visibilityFilter: PropTypes.oneOf([
'SHOW_ALL',
'SHOW_COMPLETED',
'SHOW_ACTIVE'
]).isRequired
};

function selectTodos(todos, filter) {
switch (filter) {
case VisibilityFilters.SHOW_ALL:
return todos;
case VisibilityFilters.SHOW_COMPLETED:
return todos.filter(todo => todo.completed);
case VisibilityFilters.SHOW_ACTIVE:
return todos.filter(todo => !todo.completed);
}
}

// 这里的 state 是 Connect 的组件的
function select(state) {
return {
visibleTodos: selectTodos(state.todos, state.visibilityFilter),
visibilityFilter: state.visibilityFilter
};
}

export default connect(select)(App);

const { dispatch, visibleTodos, visibilityFilter } = this.props;

text =>
dispatch(addTodo(text))

export const ADD_TODO = 'ADD_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
export const VisibilityFilters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE',
};

export function addTodo(text) {
return {
type: ADD_TODO,
text
};
}

export function completeTodo(index) {
return {
type: COMPLETE_TODO,
index
};
}

export function setVisibilityFilter(filter) {
return {
type: SET_VISIBILITY_FILTER,
filter
};
}

text =>
dispatch(addTodo(text))

import {
SET_VISIBILITY_FILTER,
VisibilityFilters
} from '../actions';

const { SHOW_ALL } = VisibilityFilters;

function visibilityFilter(state = SHOW_ALL, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
}

export default visibilityFilter;

import {
ADD_TODO,
COMPLETE_TODO
} from '../actions';

function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
];
case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(action.index + 1)
];
default:
return state
}
}

export default todos;

import { combineReducers } from 'redux';
import todos from './todos';
import visibilityFilter from './visibilityFilter';

const rootReducer = combineReducers({
todos,
visibilityFilter
});

export default rootReducer;

import React, { Component, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';

export default class AddTodo extends Component {
render() {
return (
<div>
<input type='text' ref='input' />
<button onClick={ e => this.handleClick(e) }>
Add
</button>
</div>
);
}

handleClick(e) {
const inputNode = findDOMNode(this.refs.input);
const text = inputNode.value.trim();
this.props.onAddClick(text);
inputNode.value = '';
}
}

AddTodo.propTypes = {
onAddClick: PropTypes.func.isRequired
};

import React, { Component, PropTypes } from 'react';

export default class Todo extends Component {
render() {
const { onClick, completed, text } = this.props;
return (
<li
onClick={onClick}
style={{
textDecoration: completed ? 'line-through' : 'none',
cursor: completed ? 'default' : 'pointer'
}}
>
{text}
</li>
);
}
}

Todo.propTypes = {
onClick: PropTypes.func.isRequired,
text: PropTypes.string.isRequired,
completed: PropTypes.bool.isRequired
};

import React, { Component, PropTypes } from 'react';
import Todo from '../Todo';

export default class TodoList extends Component {
render() {
return (
<ul>
{
this.props.todos.map((todo, index) =>
<Todo
{...todo}
onClick={() => this.props.onTodoClick(index)}
key={index}
/>
)
}
</ul>
);
}
}

TodoList.propTypes = {
onTodoClick: PropTypes.func.isRequired,
todos: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired,
completed: PropTypes.bool.isRequired
}).isRequired).isRequired
};

import React, { Component, PropTypes } from 'react';

export default class Footer extends Component {
renderFilter(filter, name) {
if(filter == this.props.filter) {
return name;
}
return (
<a
href="#"
onClick={e => {
e.preventDefault();
this.props.onFilterChange(filter);
}}>
{name}
</a>
);
}

render() {
return (
<p>
SHOW
{' '}
{this.renderFilter('SHOW_ALL', 'All')}
{', '}
{this.renderFilter('SHOW_COMPLETED', 'Completed')}
{', '}
{this.renderFilter('SHOW_ACTIVE', 'Active')}
.
</p>
);
}
}

Footer.propTypes = {
onFilterChange: PropTypes.func.isRequired,
filter: PropTypes.oneOf([
'SHOW_ALL',
'SHOW_COMPLETED',
'SHOW_ACTIVE'
]).isRequired
};