zzzmj / old-blog Goto Github PK

// ActionTypes.js
export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

// Action.js
import * as ActionTypes from './ActionTypes'

export const increment = (counterCaption) => {
    return {
        type: ActionTypes.INCREMENT,
        counterCaption: counterCaption
    }
}

export const decrement = (counterCaption) => {
    return {
        type: ActionTypes.DECREMENT,
        counterCaption: counterCaption
    }
}

import { createStore } from 'redux'
import reducer from './Reducer.js'

const initValue = {
    'First': 0,
    'Second': 10,
    'Third': 20
}

const store = createStore(reducer, initValue)

export default store

class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = this.getOwnState()
        //...
    }

    getOwnState() {
        const { caption } = this.props
        return {
            value: store.getState()[caption]
        }
    }
}

import store from '../Store'

//...
componentDidMount() {
   // 通过store.subscribe()监听组件变化，只要组件的状态变化，就会调用onChange方法
   store.subscribe(this.onChange)
}

componentWillUnmount() {
   // 组件删除后，注销监听
   store.unsubscribe(this.onChange)
}

onChange() {
  const newState = this.getOwnState()
  this.setState(newState)
}

onClickIncrementButton() {
  const { caption } = this.props
  store.dispatch(Actions.increment(caption))
}

onClickDecrementButton() {
  const { caption } = this.props
  store.dispatch(Actions.decrement(caption))
}

// 发布订阅模式
function createStore(reducer, initState) {
    let state = initState
    let listeners = []

    function subscribe(listener) {
        listeners.push(listener)
    }

    function dispatch(action) {
        // 按照 reducer 修改 state
        state = reducer(state, action)
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i]
            listener()
        }
    }

    function getState() {
        return state
    }

    return {
        subscribe,
        dispatch,
        getState,
    }
}

export default createStore

class Counter extends Component {
    render() {
        const { caption, onClickDecrementButton, onClickIncrementButton, value } = this.props
        return (
            <div>
                <button style={style} onClick={onClickIncrementButton} >+</button>
                <button style={style} onClick={onClickDecrementButton} >-</button>
                <span>{caption} count: {value}</span>
            </div>
        )
    }
}

const Counter = (props) => {
    const { caption, onClickDecrementButton, onClickIncrementButton, value } = props
    return (
        <div>
            <button style={style} onClick={onClickIncrementButton} >+</button>
            <button style={style} onClick={onClickDecrementButton} >-</button>
            <span>{caption} count: {value}</span>
        </div>
    )
}

import store from '../Store.js';

class CounterContainer extends Component {
    constructor(props) {
        super(props)
        this.state = this.getOwnState()
        this.onClickIncrementButton = this.onClickIncrementButton.bind(this)
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this)
        this.onChange = this.onChange.bind(this)
    }

    shouldComponentUpdate(nextProps, nextState) {
        // 避免不必要的渲染
        return (nextProps.caption !== this.props.caption) || 
            (nextState.value !== this.state.value);
    }

    componentDidMount() {
        // 通过store.subscribe()监听组件变化，只要组件的状态变化，就会调用onChange方法
        store.subscribe(this.onChange)
    }

    componentWillUnmount() {
        // 组件删除后，注销监听
       store.unsubscribe(this.onChange)
    }

    getOwnState() {
        return {
            value: store.getState()[this.props.caption]
        }
    }

    onChange() {
        const newState = this.getOwnState()
        this.setState(newState)
    }

    onClickIncrementButton() {
        store.dispatch(Actions.increment(this.props.caption))
    }

    onClickDecrementButton() {
        store.dispatch(Actions.decrement(this.props.caption))
    }

    render() {
        return (
            <Counter caption={this.props.caption}
                onClickDecrementButton={this.onClickDecrementButton} 
                onClickIncrementButton={this.onClickIncrementButton}
                value={this.state.value} />
        )
    }
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Provider extends Component {
    // 1. 实现getChildContext，返回代表context的对象
    getChildContext() {
        return {
            store: this.props.store
        }
    }

    render() {
        // 简单的将子组件渲染出来
        return this.props.children
    }
}

// 2. 通过childContextTypes静态属性来声明提供给子组件的属性
Provider.childContextTypes = {
    store: PropTypes.object
}

export default Provider

<Provider>  
    <ControlPanel />
</Provider>

ReactDOM.render(
    <Provider store={store}>
        <ControlPanel />
    </Provider>,
    document.getElementById('root')
)

class CounterContainer extends Component {
    constructor(props, context) {
        // 得带上参数context, 
        super(props, context)
    }

    // ...
}

// 子组件需要通过一个静态属性contextTypes声明后，才能访问父组件Context对象的属性
CounterContainer.contextTypes = {  
    store: PropTypes.object
}

// 完整写法
const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter)
export default CounterContainer;

// 第二个是可选参数，这个参数代表着容器组件的props
function mapStateToProps(state, ownProps) {
    const { caption } = ownProps
    return {
        value: state[caption]
    }
}

// 第二个是可选参数，这个参数代表着容器组件的props
function mapDispatchToProps(dispatch, ownProps) {
    const {caption} = ownProps
    return {
        onIncrement: () => {
            dispatch(Actions.increment(caption))
        },
        onDecrement: () => {
            dispatch(Actions.decrement(caption))
        }
    }
}

<Provider store={store}>  
    <ControlPanel />
</Provider>

function doNothingMiddleware({dispatch, getState}) {
    return function(next) {
        return function(action) {
            return next(action)
        }
    }
}

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

// logger.js
const logger = ({dispatch, getState}) => next => action => {
    console.group(action.type)
    console.log('dispathching:', action)
    const result = next(action)
    console.log('next state:', getState())
    console.groupEnd()
    return result
}

export default logger
// store.js
const store = createStore(rootReducer, applyMiddleware(logger))

const doNothingEnhancer = (createStore) => (reducerpreloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    return store
}

const logger = createStore => (...args) => {
    const store = createStore(...args)
    const dispatch = (action) => {
        console.group(action.type)
        console.log('dispathching:', action)
        const result = store.dispatch(action)
        console.log('next state:', getState())
        console.groupEnd()
        return result
    }
    return {...store, dispatch}
}

export default logger

import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './reducers'
import logger from './middleare/logger';
import logEnhancer from './enhancers/logger'

const store = createStore(rootReducer, compose(applyMiddleware(logger), logEnhancer))

export default store

import { connect } from 'react-redux'
import * as actions from '../actions'
import Footer from '../components/Footer'

const mapStateToProps = state => {
    return {
        filter: state.filter
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setVisibleTodos: (filter) => dispatch(actions.setFilter(filter))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

// FooterContainer
import { connect } from 'react-redux'
import * as actions from '../actions'
import Footer from '../components/Footer'
import { getFilter } from '../seletors'

const mapStateToProps = state => {
    return {
        filter: getFilter(state)
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setVisibleTodos: (filter) => dispatch(actions.setFilter(filter))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

// selectors
export const getFilter = (state) => state.filter

export const getVisibleTodos = (state) => {
    const {todos, filter} = state
    switch (filter) {
        case 'all':
            return todos
        case 'completed':
            return todos.filter(todo => todo.completed)
        case 'active':
            return todos.filter(todo => !todo.completed)
        default:
            return new Error('Unknown filter:' + filter)
    }
}

import { createSelector } from 'reselect'

export const getFilter = (state) => state.filter
const getTodos = (state) => state.todos

export const getVisibleTodos = createSelector(
    [ getFilter, getTodos ],
    (filter, todos) => {
        switch (filter) {
            case 'all':
                return todos
            case 'completed':
                return todos.filter(todo => todo.completed)
            case 'active':
                return todos.filter(todo => !todo.completed)
            default:
                return new Error('Unknown filter:' + filter)
        }
    }
)

class ControlPanel extends Component {
    render() {    
        return (      
            <div>        
                <Counter caption="First" initValue={0} />       
                <Counter caption="Second" initValue={10} />       <Counter caption="Third" initValue={20} />      
            </div>    
        );  
    }
}


class Counter extends Component {
    constructor(props) {
        // 如果要用this，必须调用super()
        super(props)
        this.state = {
            count: props.initValue || 0
        }
        this.onClickIncrementButton = this.onClickIncrementButton.bind(this)
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this)    
    }

    onClickIncrementButton() {
        var count = this.state.count + 1
        this.setState({ 
            count
        })
    }

    onClickDecrementButton() {
        var count = this.state.count - 1
        this.setState({
            count
        })
    }

    render() {
        const { caption } = this.props
        return (
            <div>
                <button style={style} onClick={this.onClickIncrementButton} >+</button>
                <button style={style} onClick={this.onClickDecrementButton} >-</button>
                <span>{ caption } count: {this.state.count}</span>
            </div>
        )
    }
}

Counter.propTypes = {
    caption: PropTypes.string.isRequired, // caption必须是字符串并且必须要填
    initValue: PropTypes.number // initValue必须是数字，可不填
}

// 使用前页面http://localhost:3000
window.location.hash='/discover'

// 使用后页面http://localhost:3000/#/3000

// 初始值:http://localhost:3000

// http://localhost:3000/test
window.history.pushState(null, null, "test"); 

// http://localhost:3000/test/book
window.history.pushState(null, null, "test/book");

// http://localhost:3000/test/book#/hello
window.history.pushState(null, null, "#/hello");

// http://localhost:3000/test/book?name=
window.history.pushState(null, null, "?name=");

// http://localhost:3000/test/book#/hello
window.history.back()

// http://localhost:3000/test/book?name=
window.history.forward()

// <BrowserRouter>
http://example.com/about

// <HashRouter>
http://example.com/#/about

// 如果路径是/about, 则显示组件About
<Route path="/about" component={About}></Route>

<Route path="/about" component={About}></Route>
<Route path="/about/resume" component={Resume}></Route>

<Route exact path="/about" component={About}></Route>

// 点击即可跳到about界面
<Link to="/about">about</Link>
<Route exact path="/about" component={About}></Route>

<Switch>
   <Route exact path="/"  component={Main}></Route>
   <Route path="/about" component={About}></Route>
   <Route path="/topics" component={Topics}></Route>
</Switch>

<Route path="/Home/:name" component={HomePage} />

const HomePage = ({ match }) => (
  <div>
    <h1> parameter => {match.params.name}
  </div>
);

<Route path='/page' component={Page} />
const extraProps = { color: 'red' }
<Route path='/page' render={(props) => (
  <Page {...props} data={extraProps}/>
)}/>
<Route path='/page' children={(props) => (
  props.match
    ? <Page {...props}/>
    : <EmptyPage {...props}/>
)}/>

const todoList = props => {
    const { todos, onToggleTodo, onRemoveTodo } = props
    return (
        <div>
            <ul>
                {todos.map(todo => (
                    <TodoItem
                        key={todo.id}
                        text={todo.text}
                        completed={todo.completed}
                        onToggleTodo={() => onToggleTodo(todo.id)}
                        onRemoveTodo={() => onRemoveTodo(todo.id)}
                    />
                ))}
            </ul>
        </div>
    )
}

// ...
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(todoList)


// TodoItem
const TodoItem = (props) => {
    const { text, completed, onToggleTodo, onRemoveTodo } = props
    const checked = completed ? 'checked' : ''
    return (
        <li>
            <input type="checkbox" onClick={onToggleTodo} checked={checked} readOnly />
            <span>{text}</span>
            <button onClick={onRemoveTodo}>删除</button>
        </li>
    )
}

class TodoItem extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        // completed或者text发生变化时，才重新渲染
        return (nextProps.completed !== this.props.completed) || 
        (nextProps.text !== this.props.text)
    }
    render() {
        const { text, completed, onToggleTodo, onRemoveTodo } = this.props
        const checked = completed ? 'checked' : ''
        return (
            <li>
                <input type="checkbox" onClick={onToggleTodo} checked={checked} readOnly />
                <span>{text}</span>
                <button onClick={onRemoveTodo}>删除</button>
            </li>
        )
    }
}

// 原有的结构
<div>
    <Todos />
</div>

// 更新
<span>
    <Todos />
</span>

// 原状态
<ul>
    <TodoItem text="First" completed={false}>  
    <TodoItem text="Second" completed={false}>
</ul>

// 更新
<ul>
    <TodoItem text="Zero" completed={false}>
    <TodoItem text="First" completed={false}>  
    <TodoItem text="Second" completed={false}>
</ul>