react-redux

Docs

创建 reducer

// todo.reducer.js
let l = console.log;

export default (state = { // state 必须为一个对象，直接对state进行修改会造成组件没有被重新渲染
  todo_list: []
},action) => {
  switch (action.type) {

    case 'push':
      if (state.todo_list.includes(action.value)) {
        return state;
      } else {
        return Object.assign({},state,{
          todo_list: [...state.todo_list,action.value]
        });
      }

    case 'delete':
      let list = state.todo_list.slice();
          list.splice(action.index,1)
      return Object.assign({},{
        todo_list: list
      })
    default:
      return state;
  }
}

生成 srore

combineReducers 将多个reducer合并

// stpre.js

import { createStore,combineReducers } from 'redux'
import demo_reduver from './demo.reducer';
import test_reducer from './test.reducer';
import todo_reducer from './todo.reducer';

export default createStore(combineReducers({
  demo_reduver,test_reducer,todo_reducer,}));

在根组件使用 store

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import store from './redux-store/store';

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

connect 把组件和reducer链接

import React,{ Component } from 'react'
import { connect } from 'react-redux'
import todo_reducer from '../redux-store/todo.reducer'
import store from '../redux-store/store'; // 也可以从store 中拿到数据

let l = console.log;
class Todo extends Component {
  render(){
    let prop = this.props.todo_reducer;
    return (
      <div>
      <input type="text" ref={ e=>this.input = e} /> <button onClick={()=>{
        store.dispatch({
          type: 'push',value: this.input.value.trim(),});
        this.input.value = '';
      }}>commit</button>
      <ul>
        {prop.todo_list.map(($_,i)=>{
          return(<div key={i}>
                <li>{ $_ } <button onClick={()=>{
            store.dispatch({
              type: 'delete',index: i,})
          }}>delete</button></li>
              
          </div>)
        })}
      </ul>
      </div>
    )
  }
}

export default connect(todo_reducer)(Todo); // reducer会被注入到组件的props中去