redux+react-redux

redux

store.js

import { createStore } from 'redux'
const initValue = {
    num: 7
}
const reduce = (state = initValue, { type, payload }) => {
  switch (type) {
    case 'add':
      return { ...state, num: state.num + payload }
    case 'minus':
      return { ...state, num: state.num - payload }
    default:
      break;
  }
}
export default createStore(reduce)

index.js

import './App.css';
import store from './store'
import { Button } from 'antd';
import 'antd/dist/reset.css';
import Parent from './Parent';

function App() {
  const handleChange = () => {
    store.dispatch({type: 'add', payload: 5})
  }
  return (
    <div className="App">
      <Parent />
      <Button type="primary" onClick={handleChange}>改变</Button>
    </div>
  );
}

export default App;

paren.js

import { useEffect, useState } from 'react'
import Son from './Son'
import store from './store'
export default function Parent(props) {

    const [info, setInfo] = useState({})

    useEffect(() => {
        const unSubscrible = store.subscribe(() =>
            setInfo(store.getState())
        );
        return () => {
            unSubscrible()
        }
    }, [])
    return <div>
        <div>paren: {info.num}</div>
        <Son />
    </div>
}

son.js

import store from './store'
import { useEffect, useState } from 'react'
export default function Son(props) {

    const [info, setInfo] = useState({})

    useEffect(() => {
        const unSubscrible = store.subscribe(() =>
            setInfo(store.getState())
        );
        return () => {
            unSubscrible()
        }
    }, [])
    
    return <div>
        <div>son: {info.num}</div>
    </div>
}

import { createStore } from 'redux';
const store = createStore(reducer);
const actions = [
  { type: 'ADD', payload: 0 },
  { type: 'ADD', payload: 1 },
  { type: 'ADD', payload: 2 }
];

const total = actions.reduce(reducer, 0); // 3

// State 是一个对象
function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一个数组
function reducer(state, action) {
  return [...state, newItem];
}

Reducer 的拆分

const chatReducer = (state = defaultState, action = {}) => {
  return {
    chatLog: chatLog(state.chatLog, action),
    statusMessage: statusMessage(state.statusMessage, action),
    userName: userName(state.userName, action)
  }
};

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

export default todoApp;

中间件和异步操作
日志中间件， redux-logger

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
const logger = createLogger();
const store = createStore(
  reducer,
  //initial_state,
  applyMiddleware(logger) //applyMiddleware(thunk, promise, logger)
);

redux-thunk
redux-promise

react-redux

import { connect } from 'react-redux'
const VisibleTodoList = connect(mapStateToProps,mapDispatchToProps)(TodoList)

const mapStateToProps = (state, ownProps) => {
	return {
		active: ownProps.filter === state.visibilityFilter
	}
})

const mapDispatchToProps = (dispatch,ownProps) => {
 return {
	onClick: () => {
		 dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter});
	}
 };
}

Provider 组件

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。
React-Redux 提供Provider组件，可以让容器组件拿到state。

 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import reducers from './reducers'
 import App from './components/App'
 let store = createStore(reducers);
 render(<Provider store={store}><App /></Provider>, document.getElementById('root'))

Provider在根组件外面包了一层，App的所有子组件就默认都可以拿到state`了。