react-redux 相關(guān)步驟

• npm install react-redux --save 在項(xiàng)目中導(dǎo)入react-rudux包
• 創(chuàng)建reducer文件

const LOGIN_IN = '登陸';

// 創(chuàng)建一個(gè)reducer對(duì)象
export function auth(state={isAuth:false,name:'dan'},action){
    switch (action.type){
        case LOGIN_IN:
            return {...state,isAuth:true,name:'lidazhou'}
            break;
        default:
            return state;
            break;
    }
}


// action函數(shù)
export function login(){
    return {type:LOGIN_IN}
}

• 多個(gè)reducer對(duì)象的合并

import { combineReducers } from 'redux';

import {app} from './app.redux';
import { auth} from './Auth.redux';
import {list } from './todo.redux'

export default combineReducers({app,auth,list})

• 在index.js中，引入Provider，reducers,createStore

import {Provider} from 'react-redux';
import reducers from './reducers';
import {createStore} from 'redux';
// 創(chuàng)建store對(duì)象
const store = createStore(reducers);
// 組建中用provider包住
ReactDOM.render(

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

• 在組件中的使用

import { connect } from 'react-redux';
import {add,sub} from './app.redux';
import {login} from './Auth.redux'

// 將store中的值state傳入到組件的props中
const maptostate = (state) =>{
    return ({state:state})
}

// 將reducers中的方法傳入到組件的props中
const maptoaction = {add,sub,login};

 class App extends Component {

    constructor(props){
        super(props);
       
    }

    render() {
        // const store = this.props.store;

        return (
            <div>
                <h1>{this.props.state.app}</h1>
// dispatch 一個(gè)action
                <button onClick={this.props.add}>增加</button>
                <button onClick={this.props.sub}>減少</button>
                <button onClick={()=>this.logAllData()}>打印數(shù)據(jù)</button>
                <h1>{this.props.state.auth.name}</h1>
                <button onClick={this.props.login}>登陸</button>
            </div>
        );
    }

    logAllData(){
        console.log('jjjjj')
        console.log(this.props.state)
    }

}


// store,action 之間的建立聯(lián)系
App = connect(maptostate,maptoaction)(App)

export default App;