react项目使用redux,数据保存不到store?

笑场
  • 64

react项目使用redux,数据保存不到store?

index.js

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

actions


export const SET_USER = 'SET_USER'
export const LOGOUT = 'LOGOUT'

export function setuser(login) {
  return {type: SET_USER, login}
}
export function logout(user) {
  return {type: LOGOUT, user}
}

reducers

import { combineReducers } from 'redux'
import { SET_USER, LOGOUT } from '../actions'

function setuser(state = '1118', action) {
  switch(action.type) {
    case SET_USER:
      return action.login
    case LOGOUT:
      return ''
    default:
     return state
  }
}
const yg = combineReducers({
  setuser
})
export default yg

使用:

class page1 extends Component {
  componentDidMount() {
    this.props.dispatch(setuser('555'))
    console.log(this.props.login)
    console.log('111')
  }
  render() {
    return (
        <Content style={{ padding: '0 10px' }}>
          <Breadcrumb style={{ margin: '8px 0', position: 'relative' }} separator=">">
            <Breadcrumb.Item><Icon type="environment-o" />当前位置</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
            <div style={{ position: 'absolute', right: '0px', top: '-6px'}}>
              <div style={{ float: 'left', marginRight: '10px' }}>
                <Avatar style={{ backgroundColor: '#87d068', marginRight: '5px', marginTop: '1px' }} icon="user" />
                <Popover placement="bottom" title="用户操作" content={content} trigger="click">
                  <Button type="dashed">user</Button>
                </Popover>
              </div>
              <div style={{ float: 'left', marginRight: '10px' }}>
                <Avatar style={{ backgroundColor: '#13c2c2', marginRight: '5px' }} icon="hdd" />
                <Button type="dashed">6+666</Button>
              </div>
              <div style={{ float: 'left' }}>
                <Avatar style={{ backgroundColor: '#2f54eb', marginRight: '5px' }} icon="calendar" />
                <Button type="dashed">year</Button>
              </div>
            </div>
          </Breadcrumb>
          <Layout style={{ padding: '24px 0', background: '#fff' }}>
            <Sider width={200} style={{ background: '#fff' }}>
              <Antdleftbar />
            </Sider>
            <Content style={{ padding: '0 24px', minHeight: 280, marginLeft: '50px' }}>
              <Antdtable />
            </Content>
          </Layout>
        </Content>
    )
  }
}
function select(state) {
  return {
    login: state.login
  }
}
export default connect(select)(page1)

输出结果是:
undefined
111

以前的项目这样用有效,半年没用,现在就变成这样了,不明白是怎么了
有些地方说为了解决React 0.13的问题
一定要用child用函数包起来
但是改
{ () => <Router /> }
会显示

React.Children.only expected to receive a single React element child.
▶ 23 stack frames were collapsed.
./src/index.js
D:/software/workspace/bj_zbzq_ext/src/index.js:11
   8 | import yg from './reducers'
   9 | let store = createStore(yg)
  10 | 
> 11 | ReactDOM.render(
  12 |   <Provider store={store}>
  13 |     { () => <Router /> }
  14 |   </Provider>, document.getElementById('root'))

不明白这是为什么,希望大牛们帮忙看一下问题在哪

回复
阅读 2k
3 个回答

你store目录结构里并没有login

虽然dispatch是个同步的操作,但是由于连接器里使用了异步的setState,所以你不可能在dispatch后立马拿到新的state。你可以在render里面把this.props.login打印出来就知道实际上是修改了的。

store的创建代码呢?有login?
const store = createStore(
reducer
)

宣传栏